如何通过CSS或JavaScript为点击滚动的Div添加平滑滚动效果？

问题说明 #

已实现点击左右按钮控制Div横向滚动，但添加的CSS transition 未生效，需要实现平滑滚动效果。

解决方案 #

方法一：CSS原生平滑滚动（最简单） #

直接给滚动容器添加 scroll-behavior: smooth，浏览器会原生处理平滑滚动逻辑，无需修改JS代码。

修改后的CSS：

.sliderBlock {
  display: flex;
  height: 200px;
  border: solid 1px red;
  width: 800px;
  overflow: hidden;
  overflow-x: auto;
  /* 新增原生平滑滚动属性 */
  scroll-behavior: smooth;
}

.sliderBlock>div {
  width: calc(100% / 5.5);
  margin-right: 2.2%;
  border: solid 1px black;
  min-width: 143px;
}

.btns {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
  cursor: pointer; /* 新增鼠标指针样式，提升交互体验 */
}

JS代码保持不变即可，点击按钮时的 scrollLeft 变化会自动应用平滑过渡。

方法二：JS控制平滑滚动（更灵活） #

使用元素的 scrollTo() 方法，通过配置 behavior: 'smooth' 实现平滑滚动，适合需要自定义滚动逻辑的场景。

修改后的JS代码：

const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
const content = document.querySelector('#Slidercontent'); // 提前获取元素，避免重复查询

rightBtn.addEventListener("click", function(event) {
  content.scrollTo({
    left: content.scrollLeft + 150,
    behavior: 'smooth'
  });
  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  content.scrollTo({
    left: content.scrollLeft - 150,
    behavior: 'smooth'
  });
  event.preventDefault();
});

为什么原CSS transition 不生效？ #

scrollLeft 是元素的滚动位置属性，不属于CSS样式属性，因此CSS transition 无法对其变化进行过渡动画，必须使用专门的平滑滚动方案。

完整代码示例 #

<div class="cardsliderblock">
  <div class="sliderBlock" id="Slidercontent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </div>
  <span class="btns horizon-prev" id="left-button"><<</span>
  <span class="btns horizon-next" id="right-button">>></span>
</div>

<style>
.sliderBlock {
  display: flex;
  height: 200px;
  border: solid 1px red;
  width: 800px;
  overflow: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.sliderBlock>div {
  width: calc(100% / 5.5);
  margin-right: 2.2%;
  border: solid 1px black;
  min-width: 143px;
}

.btns {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
  cursor: pointer;
}
</style>

<script>
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
const content = document.querySelector('#Slidercontent');

rightBtn.addEventListener("click", function(event) {
  content.scrollLeft += 150;
  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  content.scrollLeft -= 150;
  event.preventDefault();
});
</script>

内容的提问来源于stack exchange，提问作者PRANAV