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

【问题标题】：How to scroll through a div horizontally with arrows using marginLeft instead of scrollLeft?如何使用marginLeft而不是scrollLeft用箭头水平滚动div？
【发布时间】：2019-09-13 13:35:41
【问题描述】：

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

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

通过计算使用 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"
    );
};

【问题讨论】：

标签： javascript jquery

【解决方案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");
}

【讨论】：