如何让滚动条滚动更加平滑？

滚动条滑动平滑化

你想为元素添加一个动画效果，以平滑滚动条的移动。为实现这一点，可利用 scroll-behavior 属性。

方法：

在 css 中，为滚动容器设置 scroll-behavior 属性为 smooth：

#container {
  scroll-behavior: smooth;
}

示例：

以下代码演示了如何使用 scroll-behavior 属性实现滚动条平滑滚动：

<div id="container">
  <div id="content">click the button to slide right!</div>
</div>

<button id="slide" type="button">slide right</button>

#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
  scroll-behavior: smooth;
}

#content {
  width: 250px;
  background-color: #ccc;
}

const button = document.getElementById("slide");

button.onclick = function () {
  document.getElementById("container").scrollLeft += 20;
};

通过设置 scroll-behavior 为 smooth，当使用 javascript 更改元素的 scrollleft 值时，滚动将平滑进行，从而消除生硬的移动效果。