scroll-behavior: smooth 必须写在 html 元素上才生效，仅对锚点跳转和 scrollintoview() 有效；js 主动滚动如 window.scrollto() 仍需显式传 behavior: 'smooth'，否则硬跳；ios safari ≤15.3 不支持，prefers-reduced-motion 启用时会静默禁用。
scroll-behavior: smooth 要生效，必须写在 html 元素上，且只对锚点跳转和 scrollIntoView() 生效；JS 主动滚动（如 window.scrollTo()）仍需显式传参，否则照样硬跳。
scroll-behavior 必须设在 html 上才起作用
浏览器的根滚动容器是 html，不是 body。写成 body { scroll-behavior: smooth; } 在 Chrome、Firefox 里可能“碰巧”有效，但在 Safari（尤其是 ≤15.3）和多数移动端 WebView 中完全无效——它压根不认。
- 正确写法只有：
html { scroll-behavior: smooth; } - 检查是否生效：打开开发者工具 → 选中
html元素 → 查看 Computed 样式里scroll-behavior是否为smooth - 如果用了 CSS 重置（比如 Normalize.css 或 * { margin: 0; }），注意别意外把
html的overflow设成了hidden或覆盖了默认高度，这会让该属性静默失效
锚点跳转后目标被导航栏遮住怎么办
这不是滚动不准，是浏览器把目标元素顶部对齐视口顶部，而 position: sticky 或 fixed 导航栏盖住了内容。解决方式不是 JS 算偏移再减，而是用 scroll-margin-top 给目标元素“预留空间”。
- 在目标元素上加：
#section { scroll-margin-top: 60px; }（值等于导航栏高度） - 优先用
px或rem，避免用%—— 计算时机不稳定，尤其在 resize 或字体缩放后容易错位 - 如果导航栏高度动态变化（比如折叠/展开），纯 CSS 难覆盖，得用 JS 动态更新该样式，或改用
element.scrollIntoView({ block: 'start', behavior: 'smooth' })+padding-top补偿
JavaScript 调用 scrollIntoView 或 scrollTo 时仍卡顿或失效
即使 html 已设 scroll-behavior: smooth，JS 调用仍不会自动继承该行为。不传 { behavior: 'smooth' }，就默认是瞬时滚动。
-
element.scrollIntoView()必须写成：element.scrollIntoView({ behavior: 'smooth', block: 'start' }); -
window.scrollTo()必须写成：window.scrollTo({ top: 200, behavior: 'smooth' });，旧写法window.scrollTo(0, 200)不触发平滑 - 常见失败原因：目标元素还没渲染完成（如 Vue/React 动态加载后立刻调用）→ 加
requestAnimationFrame延迟一帧；父容器有overflow: hidden或transform→ 滚动上下文被截断，检查祖先元素样式 - iOS Safari 对
position: sticky元素的scrollIntoView行为异常 → 改用window.scrollTo手动计算getBoundingClientRect().top + window.scrollY
移动端和旧浏览器兼容性不能靠 guess
scroll-behavior: smooth 在 iOS Safari ≤15.3 完全不支持，15.4+ 才开始稳定；安卓部分 WebView（如微信 X5 内核）也静默忽略。系统开启 prefers-reduced-motion: reduce 时，所有浏览器都会强制禁用该行为，且不报错。
- 检测支持性不要用
@supports (scroll-behavior: smooth)—— 它只测 CSS，不反映 JS 行为是否可用 - 稳妥做法：
if ('scrollBehavior' in document.documentElement.style)，不支持时降级为element.scrollIntoView()或手动实现线性插值动画 - 单页应用路由切换后不滚动？CSS 属性不响应
history.pushState()→ 必须在路由钩子（如useEffect/mounted）里手动调用滚动 API，并确保目标 DOM 已挂载
真正麻烦的从来不是那行 CSS，而是滚动容器是否真实、目标元素是否可见、JS 调用时有没有漏掉 { behavior: 'smooth' } —— 这三点任一缺失，scroll-behavior: smooth 就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
