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

Question

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

但我不知道如何设置它，使水平滚动时的 div 与 PC 和移动设备上的 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"
    );
};

Answer 1

我认为你需要一起计算所有图像，减去最后一个。

 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");
}