如何自定义scrollTo的滚动速度

原生 scrollTo() 的 beha vior: "smooth" 不支持调节滚动速度，但可通过 CSS 自定义缓动函数或使用 Ja vaScript 手动实现可精确控制时长与速度的滚动动画。

想让页面滚动既快速又平稳，同时还能自定义动画效果？如果你用过原生的 scrollTo({ beha vior: 'smooth' })，可能会发现一个常见痛点：滚动速度完全由浏览器控制，开发者无法干预。

MDN 文档明确说明，scrollTo() 的 beha vior 选项只接受 “auto” 或 “smooth” 两种字符串。至于滚动时长、缓动曲线或类似 scrollSpeed 的参数——标准中并未提供。

推荐方案一：CSS scroll-beha vior 配合自定义 scroll-timing-function（现代浏览器适用）

如果滚动由锚点跳转或 scrollIntoView() 触发，CSS 可以发挥一定作用。通过 scroll-beha vior: smooth 可启用平滑滚动。

.scrollable-list {
  scroll-beha vior: smooth;
  /* 注意：此属性仅作用于 scroll-beha vior: smooth 的整体滚动，但 timing function 需配合 scroll-snap 或 JS 模拟 */
}

需要明确一点：纯 CSS 目前无法为 scrollTo() 方法调整缓动曲线或滚动时长。 这是当前 CSS 滚动行为标准的固有边界，并非代码书写问题。

推荐方案二：使用 requestAnimationFrame 手动实现可控滚动（精准且兼容性强）

若需真正掌控滚动速度，推荐使用 Ja vaScript 自行实现。以下轻量工具函数允许你精确设定滚动时长，并自由选择任意缓动函数，特别适合侧边栏自动对齐等精细操控场景。

function smoothScrollTo(element, targetY, duration = 500, easing = t => t * (2 - t)) {
  const start = element.scrollTop;
  const change = targetY - start;
  const startTime = performance.now();

  function animate(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easeProgress = easing(progress);
    element.scrollTop = start + change * easeProgress;

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

// 使用示例：滚动到 nearestOption.offsetTop，耗时 800ms，缓入缓出
smoothScrollTo(scrollableList, scrollTo, 800, t => t * t * (3 - 2 * t)); // easeInOutCubic

此方案具备以下核心优势：

• 速度由你定义：duration 参数（单位毫秒）直接控制滚动快慢，数值越大滚动越慢，反之越快。
• 动画曲线自由选择：easing 函数接收 0 到 1 的进度值 t，可返回任意插值比例。例如 t => t 表示匀速，t => t*t 实现经典缓入效果。
• 兼容性与可控性兼备：完全绕开原生 beha vior: “smooth”，从根源上避免不可控问题。基于 requestAnimationFrame 实现，可在包括 IE10+ 在内的绝大多数浏览器中稳定运行。

如需结合 scrollIntoView() 定位目标，可先使用 element.scrollIntoView({ block: 'nearest', inline: 'nearest' }) 计算目标元素的 offsetTop，再调用上述函数平滑滚动，实现精准对齐。

总体而言，原生 scrollTo() 不提供速度参数并非设计缺陷，而是其职责定位使然。当项目需要精细控制滚动体验时，手动实现的动画方案更为可靠、灵活且具有实际价值。