scroll-behavior: smooth 无效最常见原因是滚动容器未设置 overflow:auto/scroll 或目标非可滚动元素；必须作用于实际滚动的容器（如局部滚动div），而非仅html/body；需确保目标元素存在匹配id，且注意safari 15.4+才支持。
scroll-behavior: smooth 为什么加了没反应
最常见原因是父容器没设置 overflow，或者滚动目标不是文档根元素。浏览器只对设置了 overflow: auto 或 scroll 的容器，且该容器本身可滚动时，才响应 scroll-behavior。
-
scroll-behavior必须写在**实际发生滚动的容器**上，不是写在html或body就一定生效；比如用div做局部滚动区，就得写在那个div上 -
html和body默认不触发平滑滚动——很多项目直接给html { scroll-behavior: smooth }，但若body内容没超出视口，根本不会滚动，自然看不到效果 - Chrome 和 Firefox 支持良好，Safari 直到 15.4 才支持
scroll-behavior，旧版 iOS Safari 完全忽略该声明
锚点跳转时 scroll-behavior 不生效的典型场景
点击 <a href="#section1"></a> 跳转失败，大概率是目标元素缺失 id，或 ID 值不匹配。CSS 层面的 scroll-behavior 只控制“怎么滚”，不解决“滚不到”的问题。
- 确保目标元素有准确的
id，比如<h2 id="section1"></h2>，不能是class="section1"或拼写错误 - 如果用 JavaScript 触发
element.scrollIntoView()，需显式传参：el.scrollIntoView({ behavior: 'smooth' })；仅设 CSS 不影响 JS API 行为 - 单页应用（如 React/Vue）中，路由跳转后 DOM 可能还没渲染完，直接调用
scrollIntoView会找不到元素——得等useEffect或nextTick后再执行
性能与可访问性上的隐性代价
scroll-behavior: smooth 看似无害，但在长列表、动画密集或低端设备上可能引发卡顿，尤其配合 position: sticky 或频繁重排的布局时。
- 滚动过程由浏览器合成线程接管，但若主线程正执行大量 JS（如监听
scroll事件做计算），仍可能丢帧 - 部分屏幕阅读器（如 NVDA + Firefox）在启用平滑滚动后，会延迟播报滚动后的内容，影响可访问性；WCAG 并不禁止它，但建议提供关闭选项
- 不要在
body上盲目启用，而应在明确需要引导用户视线的场景下使用，比如文档导航、表单错误定位
替代方案：何时该放弃 scroll-behavior 直接手写
当需要精确控制缓动曲线、中断滚动、或兼容 IE/旧 Safari 时，scroll-behavior 就不够用了。这时候得退回到 JavaScript 方案。
立即学习“前端免费学习笔记（深入）”；
- 用
window.scrollTo()配合{ top, left, behavior: 'smooth' }是最简替代，但同样受浏览器支持限制 - 需要中断滚动？原生 API 不支持，得用
requestAnimationFrame+cancelAnimationFrame自己实现动画帧控制 - 想用
cubic-bezier(0.2, 0.8, 0.4, 1)这类自定义缓动？CSS 不支持，只能靠 JS 动画库（如scroll-into-view-if-needed）或自己写 easing 函数
真正麻烦的从来不是加一行 scroll-behavior: smooth，而是它生效的前提太具体、失效的原因太隐蔽，而且一出问题就很难定位是 CSS、DOM、JS 还是兼容性导致的。
