原生 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 <p>? <strong>注意事项</strong>：</p>
- 避免在 scroll 事件中频繁调用 scrollTo()，易引发性能问题或抖动；
- 若需兼容旧浏览器（如 IE），应降级为 scrollTop + 定时器；
- 对于侧边栏自动对齐最近选项的场景，建议先用 element.getBoundingClientRect() 计算可视区域偏移，再调用可控滚动函数，确保逻辑与动效解耦；
- 原生 scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 可替代部分 scrollTo 场景，且支持 block/inline 对齐策略，但同样不支持自定义速度。
总结：若追求精确时长与流畅体验，手动实现滚动动画是当前最可靠、最灵活的方案；而原生 behavior: "smooth" 仅适用于对滚动节奏无严格要求的通用场景。
