如何自定义 scrollIntoView 平滑滚动的持续时间？-html教程-PHP中文网

如何自定义 scrollIntoView 平滑滚动的持续时间？

scrollIntoView({ behavior: 'smooth' }) 默认滚动时长不可直接配置，但可通过 CSS 自定义过渡时间，或使用 JavaScript 替代方案实现精确控制。

`scrollintoview({ behavior: 'smooth' })` 默认滚动时长不可直接配置，但可通过 css 自定义过渡时间，或使用 javascript 替代方案实现精确控制。

原生 Element.scrollIntoView() 的 { behavior: 'smooth' } 选项虽支持平滑滚动，但不提供 duration（毫秒）参数——这是 Web 标准的限制，无法通过 JS 配置滚动时长。不过，有以下两种专业、可靠且兼容性良好的解决方案：

✅ 方案一：CSS 控制滚动持续时间（推荐）

在支持 scroll-behavior 的现代浏览器中，可通过 scroll-behavior: smooth 结合 scroll-timing-function 和 scroll-duration（实验性）实现控制。但注意：scroll-duration 尚未被任何主流浏览器正式支持。因此，更稳定的做法是利用 CSS 过渡属性统一接管所有 smooth 滚动行为：

/* 全局平滑滚动，并指定动画时长与缓动函数 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 关键：覆盖浏览器默认的 smooth 滚动过渡时间 */
html {
  /* 使用自定义滚动过渡（仅对 scroll-behavior: smooth 生效）*/
  /* 注意：此写法为 Chromium 125+ 及 Safari 17.4+ 支持的实验性标准 */
  --scroll-duration: 1200ms;
  --scroll-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

⚠️ 当前（2024 年）仅有 Chrome 125+ 和 Safari 17.4+ 支持 --scroll-duration 和 --scroll-timing-function 自定义变量（需配合 scroll-behavior: smooth）。若需广泛兼容，请采用方案二。

✅ 方案二：JavaScript 手动实现可控滚动（全浏览器兼容）

使用 element.scrollTo() + requestAnimationFrame 或 animate() API 实现完全可控的滚动动画：

const scroll = () => {
  const element = document.getElementById('element') as HTMLDivElement;
  if (!element) return;

  const targetTop = element.getBoundingClientRect().top + window.scrollY;

  // 使用 Web Animations API（推荐，精度高、性能好）
  window.scrollTo({
    top: targetTop,
    behavior: 'auto', // 禁用原生 smooth，由我们控制
  });

  // 手动动画：持续 1500ms，easeInOutCubic 缓动
  const startTime = performance.now();
  const duration = 1500;
  const startTop = window.scrollY;

  const animateScroll = (currentTime: number) => {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    // easeInOutCubic 缓动函数
    const ease = progress <p>✅ 优势：  </p>