直接写html { scroll-behavior: smooth; }可启用全局平滑滚动，但90%失效源于滚动容器非html、目标元素隐藏或未挂载、系统开启“减少动画”、页面不可滚动、框架插入wrapper导致根节点偏移，且仅对原生锚点跳转和scrollIntoView()生效。
直接写 html { scroll-behavior: smooth; } 就能启用全局平滑滚动，但 90% 的“没动画”问题，不是代码写错了，而是滚动容器、目标可见性或系统设置没对上。
为什么写了 scroll-behavior: smooth 却还是“啪”一下跳过去
浏览器只在满足严格条件时才触发该行为。常见失效原因不是 CSS 语法错，而是底层机制被绕过：
-
scroll-behavior必须作用于实际滚动容器——页面级就是html元素，body上写完全无效（DevTools 里看html的 computed 值才是关键） - 目标元素被
display: none、visibility: hidden隐藏，或 DOM 还没挂载（比如 Vue 的v-if切换后立刻点链接） - 用户开启了系统级「减少动画」偏好（
prefers-reduced-motion: reduce），浏览器会静默禁用，不报错也不提示 - 页面内容高度不足一屏，
html根本不可滚动，加了也白加 - 某些框架（如 Next.js）插入 wrapper
div，导致真实滚动根节点不再是html，需用document.documentElement检查
哪些操作能真正触发 scroll-behavior: smooth
它只响应两类原生行为，其他 JS 滚动调用默认仍是瞬移：
- 用户点击
<a href="#about">这类锚点链接 - JS 调用
element.scrollIntoView()且未传behavior参数（此时会继承 CSS 值） - 不生效的操作包括：
element.scrollTop = 100、window.scrollTo(0, 200)、Vue Router / React Router 的路由跳转（history.pushState不触发该 CSS） - 想用 JS 实现平滑滚动，必须显式传参：
element.scrollIntoView({ behavior: 'smooth' })或window.scrollTo({ top: 100, behavior: 'smooth' })
移动端和自定义滚动容器的特殊处理
iOS Safari 对 html { scroll-behavior: smooth; } 支持极差：15.4 之前完全不支持；16.0+ 仍常卡顿或静默失败。安卓 Chrome 89+ 尚可，但 Cordova/Capacitor 等 WebView 环境可能拦截 hash 变更，导致 CSS 方案彻底失效。
立即学习“前端免费学习笔记（深入）”；
若用了局部滚动容器（如 <div class="chat-history" style="height: 400px; overflow-y: auto;">），scroll-behavior: smooth 必须加在该容器上，而不是 html：
`.chat-history {
height: 400px;
overflow-y: auto;
scroll-behavior: smooth;
}`注意：该容器必须同时满足「有固定高度/最大高度 + overflow-y: auto 或 scroll + 内容实际溢出」，否则属性无意义。
锚点跳转后内容被导航栏遮挡怎么办
这不是滚动不准，是浏览器把目标元素顶部对齐视口顶部，而 position: fixed 导航栏盖住了它。解决方法是用 scroll-margin-top 给目标元素预留空间：
`h2[id] {
scroll-margin-top: 72px; /* 和导航栏高度一致 */
}`该属性只对锚点跳转和 scrollIntoView() 生效，对 scrollTo() 无效。如果导航栏高度不固定（如响应式折叠），需用 JS 动态更新该值，或改用 scrollIntoView({ block: 'start', behavior: 'smooth' }) 配合 padding 补偿。
最容易被忽略的是：即使 CSS 写对了，只要目标元素处于 transform、filter 或 overflow: hidden 的父容器中，浏览器就可能无法准确定位，表现为“滚过头”或“停在半路”。这种嵌套会破坏滚动上下文，让 scroll-behavior 失效——不是 bug，是规范限制。
