Question

当前，我正在尝试修改一个朋友给我的代码，该代码将通过单击div两侧的按钮来增加或减小div内的滚动距离。 This is where I'm at so far-我获得的将按钮链接到div和操作的代码如下：

document.addEventListener("DOMContentLoaded", function(e) {
  console.log("DOM loaded");
  var buttons = document.getElementsByClassName("right-arrow");

  for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(e){
      console.log(`Function fired on ${this.id}`);
      var the_scroller = this.closest(".scroller-gutter");

      the_scroller.getElementsByClassName('scroller')[0].scrollLeft += 120;
    }
  }

}, false);

我真正想做的就是在某处添加{behavior: "smooth"}，以使onClick动画不那么混乱，并模仿预期的自然滚动行为，但是我对JS还是陌生的，不知道该怎么做。

此外，当我重新排列.scroller-gutter div中的按钮时，功能有时会中断。知道为什么会这样吗？

Answer 1

您可以在选项中将behavior: 'smooth'与scrollTo()函数一起使用，以平滑滚动到给定点。就您而言，它看起来像：

the_scroller.getElementsByClassName('scroller')[0]
  .scrollTo({ left: the_scroller.getElementsByClassName('scroller')[0].scrollLeft + 120, behavior: 'smooth' });

https://codepen.io/anon/pen/VEoYyx

您也可以按照建议的here考虑使用scrollBy()或scrollIntoView()

水平滚动功能的滚动动画

1 个答案: