水平滚动功能的滚动动画答案

【问题标题】：Scroll Animation for Horizontal Scroll Feature水平滚动功能的滚动动画
【发布时间】：2018-10-31 18:20:15
【问题描述】：

目前，我正在尝试修改朋友给我的代码，通过单击 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 中的按钮时，功能有时会中断。知道为什么会这样吗？

【问题讨论】：

如果您愿意进行重构，我可以想到许多不同的方法来实现这一点：Animate、CSS transition，或者执行setInterval 并逐步增加您的scrollLeft与蜱。您是否确定保留以下行？：the_scroller.getElementsByClassName('scroller')[0].scrollLeft += 120;
已经在这里回答：stackoverflow.com/questions/24635884/…

标签： javascript html css

【解决方案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

【讨论】：