CSS如何实现平滑滚动效果_scroll-beha vior属性的应用场景
想实现页面内锚点跳转的平滑滚动？很多人第一反应就是那句经典的 scroll-beha vior: smooth。没错，一行CSS确实能带来丝滑的体验，但这里有个关键前提：它只对原生的 链接和 Ja vaScript 的 element.scrollIntoView() 方法生效。如果你用的是 window.scrollTo()，那对不起，这行CSS管不着，你得手动加上 { beha vior: 'smooth' } 参数才行。
哪些地方写 scroll-beha vior 才有效
这个属性必须写在真正的根滚动容器上。在绝大多数现代浏览器里，这个容器是 html 元素，而不是 body。所以，如果你把代码写成 body { scroll-beha vior: smooth; }，大概率会发现点了链接页面毫无反应，问题就出在这儿。
正确的写法其实很简单：
立即学习“前端免费学习笔记（深入）”；
html {
scroll-beha vior: smooth;
}
记住，这个声明只影响“被动”的滚动行为，比如用户点击锚链接，或者代码调用默认的 scrollIntoView()。一旦你主动用 Ja vaScript 调用 window.scrollTo()，想实现平滑效果，就必须手动指定 { beha vior: 'smooth' } 选项，CSS 的那行设置在这儿不起作用。
scroll-beha vior 在单页应用（SPA）里的局限性
到了 Vue、React 这类单页应用里，事情就有点不一样了。路由切换时，页面内容虽然更新了，但并不会触发原生的锚点导航，自然也就不会调用 scrollIntoView()。结果就是，你设好的 scroll-beha vior: smooth 完全派不上用场，页面会“唰”地一下生硬地跳转。
这时候，就需要配合路由的钩子或生命周期手动处理：
- 在 Vue Router 里，你需要在
scrollBeha vior配置中返回{ beha vior: 'smooth' }对象，或者手动调用目标元素的scrollIntoView方法。 - 如果是 React Router v6，通常得用
useEffect监听路由变化，然后找到主容器执行scrollIntoView({ beha vior: 'smooth' })。 - 纯 Ja vaScript 实现的 SPA 也一样，监听 URL 变化后，必须主动执行带平滑参数的滚动操作。
漏掉这一步，整个页面的平滑滚动体验就会在路由跳转时断掉。
兼容性和降级处理要点
谈到兼容性，scroll-beha vior 的支持情况是：Chrome 61+、Firefox 36+、Safari 15.4+ 以及 Edge 79+ 都提供了支持。需要特别注意的是 iOS Safari，在 15.4 版本之前是完全不支持的。而且，由于这个属性涉及浏览器底层的滚动管线，很难通过 Polyfill 来完美模拟。
那面对老版本浏览器该怎么办？一个常见的误区是为了兼容而去强行引入 Ja vaScript 滚动动画库（比如 smooth-scroll）。这么做很容易和浏览器原生行为产生冲突，导致页面卡顿甚至重复滚动，反而得不偿失。
更稳妥的策略其实是“渐进增强”：
- 保留
html { scroll-beha vior: smooth; }作为现代浏览器的默认福利。 - 对于不支持的环境，就坦然接受原生滚动——虽然生硬了点，但绝对稳定可靠。
- 尤其要避免同时引入 CSS 和 JS 两套平滑逻辑（比如既设置了 CSS 属性，又给所有锚点链接绑定了
preventDefault和自定义的scrollTo函数），那简直是给自己挖坑。
最后，还有一个容易被忽略的细节：当页面存在多个滚动容器时（比如一个固定高度的侧边栏设置了 overflow: auto），scroll-beha vior 只对它直接应用的那个容器生效。它不会自动“传染”给父级或子级的滚动区域。所以，如果你的页面结构复杂，有多个独立的可滚动区域，记得给每个需要平滑效果的容器都单独设置这个属性，别只盯着 html 元素。
