如何调整 scrollTo() 函数实现个性化滚动速度设置？

本文共计682个文字，预计阅读时间需要3分钟。

原生+`scrollTo()`+的+`behavior: smooth`+不支持调节滚动速度，但可通过+css+自定义缓动函数或使用+javascript+手动实现，以精确控制滚动时长与速度的滚动动画。

在 Web 开发中，element.scrollTo({ top: y, behavior: "smooth" }) 是实现平滑滚动最常用的方式，但它本质上由浏览器控制——其持续时间、加速度曲线（easing）均不可直接配置。MDN 明确指出：scrollTo() 的 behavior 仅接受 "auto" 或 "smooth" 字符串值，不提供 duration、easing 或 scrollSpeed 参数。

✅ 推荐方案一：CSS scroll-behavior + 自定义 scroll-timing-function（现代浏览器）
虽然 scrollTo() 本身不支持速度控制，但若滚动由锚点跳转或 scrollIntoView() 触发，可通过 CSS 控制：

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

⚠️ 然而，纯 CSS 无法为 scrollTo() 调整缓动曲线或时长——这是当前标准的限制。

✅ 推荐方案二：用 requestAnimationFrame 手动实现可控滚动（精准、兼容性好）
以下是一个轻量、可配置持续时间和缓动函数的滚动工具函数，适用于你的侧边栏自动对齐场景：

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 函数接收归一化进度 t ∈ [0,1]，返回对应插值比例（如 t => t 为匀速，t => t*t 为缓入）；
• 此方案完全绕过原生 behavior: "smooth"，规避了其不可控性，且兼容所有支持 requestAnimationFrame 的浏览器（包括 IE10+）。

? 进阶提示： 若需与 scrollIntoView() 结合（如自动对齐最近选项），可先调用 element.scrollIntoView({ block: 'nearest', inline: 'nearest' }) 获取目标位置，再用上述函数平滑滚动至计算出的 offsetTop。

总结：原生 scrollTo() 无 scrollSpeed 参数是设计使然，而非缺陷；真正需要精细控制时，手动动画是更可靠、灵活且标准化的实践方式。