javascript - 水平滚动功能的滚动动画

Question

目前，我正在尝试修改一位 friend 给我的代码，该代码将通过单击 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

您可以使用 scrollTo()在选项中使用 behavior: 'smooth' 来平滑滚动到给定点。在您的情况下，它看起来像:

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

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

您还可以考虑使用 scrollBy() 或 scrollIntoView()，建议 here