如何控制scrollTo()方法的滚动速度？实现侧边栏平滑定位到选项

数据老陈

2026-7-10

侧边栏平滑滚动到目标选项的实现优化

你的现有代码已经用到了原生平滑滚动配置，但如果觉得滚动速度不够慢，或者想要更精准的元素定位，可以参考以下两种优化方案：

方案一：用元素scrollIntoView精准定位（推荐）

直接针对目标选项元素执行滚动，比手动计算top值更精准，原生支持平滑效果：

// 假设targetOption是你要滚动到的目标选项DOM元素
targetOption.scrollIntoView({
  behavior: 'smooth',
  block: 'start' // 可选值：start/center/end，控制元素在容器中的对齐位置
});

这种方式会自动处理容器的滚动位置，无需手动计算滚动距离，兼容性也较好。

方案二：自定义滚动动画实现可控速度

如果原生smooth的滚动速度不符合需求，可以通过requestAnimationFrame实现自定义时长的滚动动画，完全控制滚动快慢：

function smoothScrollTo(container, targetTop, duration = 1200) {
  const startTop = container.scrollTop;
  const distance = targetTop - startTop;
  let startTime = null;

  const animateScroll = (currentTime) => {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    // 加入缓动函数，让滚动过程更自然
    const easedProgress = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;
    
    container.scrollTop = startTop + distance * easedProgress;
    
    if (timeElapsed < duration) {
      requestAnimationFrame(animateScroll);
    }
  };

  requestAnimationFrame(animateScroll);
}

// 使用示例：将scrollableList滚动到指定top位置，1500ms完成滚动
smoothScrollTo(scrollableList, scrollTo, 1500);

通过调整duration参数（单位：毫秒），可以自由控制滚动的快慢，数值越大滚动越慢。