如何使用CSS _scroll-behavior属性实现网页平滑滚动效果？

本文共计912个文字，预计阅读时间需要4分钟。

最常见的原因是父容器未设置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"> 跳转失败，大概率是目标元素缺失 id，或 ID 值不匹配。CSS 层面的 scroll-behavior 只控制“怎么滚”，不解决“滚不到”的问题。

• 确保目标元素有准确的 id，比如 <h2 id="section1">，不能是 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 还是兼容性导致的。