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

原生 scrollIntoView({ behavior: 'smooth' }) 不支持直接设置滚动时长，但可通过 CSS 的 scroll-behavior 配合 scroll-timing-function 和 scroll-duration（实验性）实现可控的慢速滚动；更可靠的方式是使用 JavaScript 自定义缓动动画替代原生行为。

原生 `scrollintoview({ behavior: 'smooth' })` 不支持直接设置滚动时长，但可通过 css 的 `scroll-behavior` 配合 `scroll-timing-function` 和 `scroll-duration`（实验性）实现可控的慢速滚动；更可靠的方式是使用 javascript 自定义缓动动画替代原生行为。

原生 Element.scrollIntoView() 的 { behavior: 'smooth' } 选项虽能启用平滑滚动，但其动画时长和缓动曲线由浏览器统一控制，无法通过 JS API 直接配置持续时间（如 2000ms）或贝塞尔函数。MDN 明确指出：scrollIntoView 的 behavior: 'smooth' 是一个布尔式开关，不接受时长参数。

✅ 推荐方案：CSS 控制（简洁、声明式）

在支持 scroll-timing-function 和 scroll-duration 的现代浏览器（Chrome 127+、Edge 127+，Firefox 尚未支持）中，可结合以下 CSS 实现可调速的全局平滑滚动：

/* 启用平滑滚动（需配合 prefers-reduced-motion 优化可访问性） */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* 自定义滚动时长与缓动 —— 实验性，仅部分 Chromium 内核生效 */
:root {
  scroll-duration: 2000ms; /* 滚动总时长 */
  scroll-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* 更缓入缓出 */
}

⚠️ 注意：scroll-duration 和 scroll-timing-function 目前为 CSS Scroll Snap Level 2 的实验性特性，生产环境慎用，且不具跨浏览器兼容性。

✅ 稳健方案：JavaScript 自定义滚动动画（推荐）

完全掌控滚动过程，兼容所有现代浏览器，并支持任意时长、缓动函数与中断逻辑：

const smoothScrollToElement = (
  element: Element,
  options: { duration?: number; easing?: (t: number) => number } = {}
) => {
  const { duration = 2000, easing = t => t * (2 - t) } // 默认 ease-in-out 类似
  const start = performance.now();
  const targetY = element.getBoundingClientRect().top + window.scrollY;
  const startY = window.scrollY;

  const animateScroll = (timestamp: number) => {
    const elapsed = timestamp - start;
    const progress = Math.min(elapsed / duration, 1);
    const easedProgress = easing(progress);
    const currentY = startY + (targetY - startY) * easedProgress;

    window.scrollTo(0, currentY);

    if (progress  {
  const element = document.getElementById('element');
  if (element) {
    smoothScrollToElement(element, { duration: 3000 }); // 3秒慢速滚动
  }
};