如何自定义 scrollTo() 的滚动速度

本篇文章给大家分享《如何自定义 scrollTo() 的滚动速度 》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

原生 scrollTo() 的 behavior: "smooth" 不支持调节滚动速度，但可通过 CSS 自定义缓动函数或使用 JavaScript 实现可控时长的平滑滚动。

原生 `scrollTo()` 的 `behavior: "smooth"` 不支持调节滚动速度，但可通过 CSS 自定义缓动函数或使用 JavaScript 实现可控时长的平滑滚动。

浏览器原生 Element.scrollTo() 方法虽支持 behavior: "smooth"，但其滚动时长和缓动曲线由用户代理（UA）决定，无法通过参数直接控制滚动速度或持续时间。MDN 文档与 CSSOM View 规范均明确指出：scrollTo() 的 smooth 行为是“实现定义的”（implementation-defined），开发者无法传入如 duration、easing 等自定义选项。

✅ 推荐方案一：CSS 控制（简洁、声明式、兼容性好）
为滚动容器设置 scroll-behavior: smooth，再通过 scroll-timing-function（需配合 scroll-snap 或 @scroll-timeline 等高级特性）间接影响动画节奏——但注意：标准 scroll-behavior 本身不接受 timing function。真正可行的是利用 CSS scroll-behavior: smooth + 自定义 scroll-margin 配合 scrollIntoView()，或更现代的方式：

.scrollable-list {
  scroll-behavior: smooth;
  /* 注意：以下属性不直接影响 scrollTo()，但可优化整体滚动体验 */
  scrollbar-width: thin;
}

⚠️ 此方式仍无法精确设定毫秒级时长，仅提供 UA 默认的“平滑”效果。

✅ 推荐方案二：JavaScript 手动实现（完全可控）
使用 requestAnimationFrame 或 setTimeout 实现带指定持续时间（如 800ms）和缓动函数（如 ease-out）的滚动动画：

function smoothScrollTo(element, targetTop, duration = 800) {
  const startTop = element.scrollTop;
  const startTime = performance.now();
  const distance = targetTop - startTop;

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    // 使用 easeOutCubic 缓动：cubic-bezier(0.215, 0.61, 0.355, 1)
    const ease = progress ** 3 * (1 + 2 * (1 - progress)) || 0;
    element.scrollTop = startTop + distance * ease;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 使用示例
smoothScrollTo(scrollableList, scrollTo, 1200); // 滚动至目标位置，耗时 1200ms

? 注意事项：

• 避免在 scroll 事件中频繁调用 scrollTo()，易引发性能问题或抖动；
• 若需兼容旧浏览器（如 IE），应降级为 scrollTop + 定时器；
• 对于侧边栏自动对齐最近选项的场景，建议先用 element.getBoundingClientRect() 计算可视区域偏移，再调用可控滚动函数，确保逻辑与动效解耦；
• 原生 scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 可替代部分 scrollTo 场景，且支持 block/inline 对齐策略，但同样不支持自定义速度。

总结：若追求精确时长与流畅体验，手动实现滚动动画是当前最可靠、最灵活的方案；而原生 behavior: "smooth" 仅适用于对滚动节奏无严格要求的通用场景。

本篇关于《如何自定义 scrollTo() 的滚动速度 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！