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 < 0.5
? 4 * progress * progress * progress
: (progress - 1) * (2 * progress - 2) * (2 * progress - 2) + 1;
const currentTop = startTop + (targetTop - startTop) * ease;
window.scrollTo(0, currentTop);
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
};
requestAnimationFrame(animateScroll);
};✅ 优势：
- 完全掌控滚动时长（如 duration = 1500）、缓动曲线、中断逻辑；
- 兼容所有现代浏览器（包括 Firefox、旧版 Chrome/Safari）；
- 可与 React 生命周期安全集成（建议添加 abortController 防止组件卸载后更新状态）。
⚠️ 注意事项
- 始终校验元素是否存在（if (!element) return），避免 null 报错；
- 在 React 中，若元素由条件渲染生成，确保 scroll() 在 DOM 更新后调用（可配合 useEffect + ref）；
- 若用户启用了「减少动画」系统偏好（prefers-reduced-motion: reduce），应降级为 behavior: 'auto'，提升可访问性。
综上，如需最大兼容性与精确控制，优先选择 JavaScript 手动动画方案；若仅面向最新浏览器且追求简洁，可尝试 CSS 自定义变量方案并做好降级处理。
