原生 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 实现可调速的全局平滑滚动：
⚠️ 注意：scroll-duration 和 scroll-timing-function 目前为
CSS Scroll Snap Level 2
的
实验性特性
，生产环境慎用，且不具跨浏览器兼容性。
✅ 稳健方案：JavaScript 自定义滚动动画（推荐）
完全掌控滚动过程，兼容所有现代浏览器，并支持任意时长、缓动函数与中断逻辑：
? 补充说明
始终校验元素是否存在（if (element)），避免 null 报错；
若需滚动至视口顶部/底部对齐，可在计算 targetY 时叠加 window.innerHeight 或调整 block 偏移；
对于 React 函数组件，建议将 scroll 封装为 useCallback，避免重复创建；
如项目已引入 framer-motion 或 react-scroll，也可借助其封装好的 animateScroll 工具，减少手写逻辑。
综上，若追求最大兼容性与精确控制，请采用 JavaScript 自定义动画；若仅需轻量级渐进增强且目标用户使用新版 Chrome/Edge，可尝试实验性 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); /* 更缓入缓出 */
}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 < 1) {
requestAnimationFrame(animateScroll);
}
};
requestAnimationFrame(animateScroll);
};
// React 中使用示例
const scroll = () => {
const element = document.getElementById('element');
if (element) {
smoothScrollToElement(element, { duration: 3000 }); // 3秒慢速滚动
}
};