scrollIntoView 原生不支持直接设置滚动时长，但可通过 CSS scroll-behavior 配合自定义 @keyframes 或 JavaScript 动画库实现可控时长的平滑滚动。
`scrollintoview` 原生不支持直接设置滚动时长，但可通过 css `scroll-behavior` 配合自定义 `@keyframes` 或 javascript 动画库实现可控时长的平滑滚动。
在现代浏览器中，Element.scrollIntoView({ behavior: 'smooth' }) 是实现平滑滚动的推荐方式，但它
不提供 duration（持续时间）参数
——其动画时长由浏览器内部决定（通常约 400–500ms），且无法通过 JavaScript API 直接配置。
✅ 正确做法：用 CSS 控制滚动动画时长
虽然 scrollIntoView 本身不支持自定义时长，但你可以通过全局或局部 CSS 的 scroll-behavior + scroll-timing-function 组合，间接影响滚动动画的节奏与时长：
⚠️
重要说明
：截至 Chrome 125 / Firefox 126 / Safari 17.5，
CSS 无法修改 scrollIntoView 的动画时长
。scroll-behavior: smooth 仅启用平滑效果，其底层动画时长和缓动函数是浏览器固定的，不可 CSS 覆盖。
✅ 推荐方案：手动实现可设时长的滚动（兼容性强、完全可控）
使用 window.scrollTo() 配合 requestAnimationFrame 或 CSS transition + scrollTop，即可精确控制滚动持续时间。以下是 React 中安全、无依赖的实现示例：
✅ 补充建议
若项目已引入
framer-motion
或
react-scroll
，可直接使用其封装的 等能力，语义化更强。
始终检查元素是否存在（避免 null 报错），尤其在 React 中元素可能尚未挂载。
在 useEffect 或事件回调中调用滚动逻辑时，确保 DOM 已就绪（必要时加 setTimeout(() => ..., 0) 或 requestIdleCallback）。
总结
方案是否可控 duration兼容性备注element.scrollIntoView({ behavior: 'smooth' })❌ 否✅ 最新浏览器简洁，但时长固定html { scroll-behavior: smooth }❌ 否✅ 全局启用影响所有原生滚动，仍不可控时长手动 requestAnimationFrame 滚动✅ 是✅ IE10+推荐，100% 自定义时长与缓动第三方库（如 react-scroll）✅ 是✅（按库而定）开发效率高，适合复杂场景
如需在 React 中复用，建议将其封装为自定义 Hook（如 useSmoothScroll(duration?: number)），提升可维护性与一致性。
/* 全局启用平滑滚动，并统一控制动画曲线与时长 */
html {
scroll-behavior: smooth;
}
/* 覆盖默认滚动过渡，使用自定义缓动和时长 */
:root {
--scroll-duration: 1200ms; /* 可自由调整，如 800ms、2000ms */
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
/* 关键：重写浏览器默认滚动过渡 */
* {
scroll-behavior: smooth !important;
}
/* 注意：以下 CSS 并不能直接作用于 scrollIntoView 的 JS 滚动 ——
浏览器目前尚未支持通过 CSS 修改 scrollIntoView 的 duration。
因此，真正可控的方案需退而求其次：手动实现 */
}const scroll = () => {
const element = document.getElementById('element');
if (!element) return;
const targetTop = element.getBoundingClientRect().top + window.scrollY;
// 使用 window.scrollTo 实现自定义时长滚动（兼容性好）
window.scrollTo({
top: targetTop,
behavior: 'smooth', // ⚠️ 注意：此处 behavior 仍不能设 duration
});
// ✅ 真正可控的替代方案：手动动画（推荐用于精确控制）
const startTime = performance.now();
const duration = 1500; // ← 自定义滚动总时长（毫秒）
const startTop = window.scrollY;
const deltaTop = targetTop - startTop;
function animateScroll(timestamp: number) {
const elapsed = timestamp - 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;
window.scrollTo(0, startTop + deltaTop * ease);
if (progress < 1) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
};