如何实现滚动结束后Div平滑微动的JavaScript滚动效果？

嘿，我懂你想要的那种滚动收尾效果——就是滚动停下来之后，容器会轻轻做个微小的平滑补位，和couleecreative.com上的表现一致对吧？你找到的那段代码只是做了滚轮事件的跨浏览器兼容处理，没实现核心的补位动画，咱们来一步步搞定它：

这个效果的关键在于两个点：

• 准确判断滚动何时停止（因为滚动是连续触发的事件流）
• 滚动停止后给目标容器添加一段平滑的小幅度位移动画

HTML结构 #

<!-- 可滚动的目标容器 -->
<div class="scroll-target">
  <!-- 填充足够多的内容让滚动可见 -->
  <p>测试内容行 1</p>
  <p>测试内容行 2</p>
  <p>测试内容行 3</p>
  <p>测试内容行 4</p>
  <p>测试内容行 5</p>
  <p>测试内容行 6</p>
  <p>测试内容行 7</p>
  <p>测试内容行 8</p>
  <p>测试内容行 9</p>
  <p>测试内容行 10</p>
  <p>测试内容行 11</p>
  <p>测试内容行 12</p>
  <p>测试内容行 13</p>
  <p>测试内容行 14</p>
  <p>测试内容行 15</p>
</div>

CSS样式 #

.scroll-target {
  height: 300px;
  width: 400px;
  overflow-y: auto;
  border: 1px solid #eee;
  /* 开启硬件加速，让动画更流畅 */
  transform: translateZ(0);
  /* 定义动画过渡的曲线和时长，模拟自然的弹性感 */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 滚动停止后触发的补位动画类 */
.scroll-snap {
  /* 这里可以调整位移幅度，比如改成translateY(5px)反向位移 */
  transform: translateY(-4px);
}

JavaScript逻辑 #

const scrollContainer = document.querySelector('.scroll-target');
let scrollEndTimer;

// 监听滚动事件
scrollContainer.addEventListener('scroll', () => {
  // 每次滚动时清除之前的定时器，重置判断逻辑
  clearTimeout(scrollEndTimer);
  // 移除补位类，避免动画叠加
  scrollContainer.classList.remove('scroll-snap');

  // 设置定时器：如果300ms内没有新的滚动事件，就判定为滚动停止
  scrollEndTimer = setTimeout(() => {
    // 添加补位类触发动画
    scrollContainer.classList.add('scroll-snap');
    // 动画结束后移除类，保证下次滚动能重新触发
    setTimeout(() => {
      scrollContainer.classList.remove('scroll-snap');
    }, 300);
  }, 300);
});

• 动画幅度：修改.scroll-snap里的translateY值，数值越大补位越明显
• 动画手感：调整CSS的transition参数，比如把0.3s改成0.2s加快动画，换其他贝塞尔曲线改变弹性
• 停止灵敏度：修改JS里的300ms，数值越小越容易触发补位（比如快速滚动后立刻停止）

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