如何为水平滚动添加平滑滚动效果？

Question

无法重现平滑滚动效果。谁能帮我？这是我整理的示例代码片段：const buttonRight = document.getElementById('slideRight');const buttonLeft = document.getElementById('slideLeft');buttonRight.onclick = function() {  document.getElementById('container').scrollLeft += 20;};buttonLeft.onclick = function() {  document.getElementById('container').scrollLeft -= 20;};#container {  width: 145px;  height: 100px;  border: 1px solid #ccc;  overflow-x: scroll;}#content {  width: 250px;  background-color: #ccc;}<div id="container">  <div id="content">Click the buttons to slide horizontally!</div></div><button id="slideLeft" type="button">Slide left</button><button id="slideRight" type="button">Slide right</button>

Answer 1

您可以使用原生 CSS 属性scroll-behavior: smooth，如下所示：

const buttonRight = document.getElementById('slideRight'); const buttonLeft = document.getElementById('slideLeft');

buttonRight.onclick = function () {

  document.getElementById('container').scrollLeft += 20;

};

buttonLeft.onclick = function () {

  document.getElementById('container').scrollLeft -= 20;

};

#container {

  width: 145px;

  height: 100px;

  border: 1px solid #ccc;

  overflow-x: scroll;

  scroll-behavior: smooth;

}

#content {

  width: 250px;

  background-color: #ccc;

}

<div id="container">

  <div id="content">Click the buttons to slide horizontally!</div>

</div>

<button id="slideLeft" type="button">Slide left</button>

<button id="slideRight" type="button">Slide right</button>