时间戳

首页 > 解决方案 > 如何使用marginLeft而不是scrollLeft水平滚动div？

javascript - 如何使用marginLeft而不是scrollLeft水平滚动div？

问题描述

我试图通过更改 div 的边距来水平滚动我的 div，因为使用 scrollLeft 属性需要我将溢出设置为隐藏在 div 上，这与我的悬停效果不符。

但是我不知道如何设置它，以使 div 在水平滚动时与 div 左右两侧的窗口完美对齐，无论是在电脑上还是在移动设备上。

通过计算使用 css('margin-left') 设置的实际边距，我设法使左箭头在边距为零时停止工作。但我不知道如何对右箭头执行相同的操作，即当 div 到达滚动结束时。

这是 div 的样子（大网格下方的那些，有多个项目） - https://netflix-clone-by-shivam.herokuapp.com/

import $ from "jquery";

export const LeftArrow = node => {
  var move = node.current;
  var margin =  parseInt($(move).css('margin-left'));
  console.log(margin)
  if(margin < 0) {
    $(move).animate(
      {
        marginLeft: "+=330px"
      },
      "slow"
    );
}
};

export const RightArrow = node => {
  var move = node.current;
  var margin = parseInt($(move).css('margin-left'));
  console.log(margin)
    $(move).animate(
      {
        marginLeft: "-=330px"
      },
      "slow"
    );
};

标签： javascriptjquery

解决方案

我认为您需要将所有图像一起计算，减去最后一张。

 var images = $(move).find('.movie-image');
 var width = 0;
 for(var i = 0; i < (images.length -1); i++){
   width += images.eq(i).width();
 }

然后仅在边距小于宽度时才进行动画处理。

if(margin < width){
  $(move).animate({
    marginLeft: "-=330px"
  }, "slow");
}

推荐阅读