CSS如何实现平滑滚动效果_scroll-behavior属性的应用场景

scroll-behavior: smooth 仅对 html 元素生效，控制锚点跳转和 scrollIntoView() 的平滑滚动；不作用于 window.scrollTo()、SPA 路由切换或 body 元素，多滚动容器需单独设置，兼容性需按浏览器版本处理。

直接用 scroll-behavior: smooth 就能实现页面内锚点跳转的平滑滚动，但仅对原生 <a href="#id"> 和 JavaScript 的 element.scrollIntoView() 生效，不控制 window.scrollTo() 的行为（除非显式加 behavior: 'smooth'）。

哪些地方写 scroll-behavior 才有效

必须写在根滚动容器上，通常是 html 元素；写在 body 上基本无效（因为多数浏览器里 body 不是真实滚动容器）。

常见错误写法：body { scroll-behavior: smooth; } → 大概率没反应。

正确写法：

立即学习“前端免费学习笔记（深入）”；

html {  scroll-behavior: smooth;}

注意：该声明只影响由用户触发的导航（如点击锚链接）或调用 scrollIntoView() 时的默认滚动行为，不影响 JS 主动调用 window.scrollTo() —— 后者需手动指定 { behavior: 'smooth' }。

scroll-behavior 在单页应用（SPA）里的局限性

Vue/React 路由切换时，scroll-behavior: smooth 不会自动生效，因为路由跳转不触发原生锚点导航，也不会调用 scrollIntoView()。

需要配合路由钩子手动处理：

• Vue Router：在 scrollBehavior 配置中返回 { behavior: 'smooth' } 对象，或调用 el.scrollIntoView({ behavior: 'smooth' })
• React Router v6：用 useEffect 监听 location.key，再调用 document.getElementById('main').scrollIntoView({ behavior: 'smooth' })
• 纯 JS SPA：监听 URL 变化后，手动执行带 behavior: 'smooth' 的滚动操作

漏掉这一步，页面“唰”一下跳到顶部，平滑效果就断了。

兼容性和降级处理要点

scroll-behavior 在 Chrome 61+、Firefox 36+、Safari 15.4+、Edge 79+ 支持；iOS Safari 15.4 之前完全不支持，且无法通过 polyfill 完美模拟（因涉及底层滚动管线）。

不建议为兼容老浏览器强上 JS 滚动动画库（如 smooth-scroll），容易和原生行为冲突，反而导致卡顿或重复滚动。

更稳妥的做法：

• 保留 html { scroll-behavior: smooth; } 作为现代浏览器的默认行为
• 对不支持的环境，不做任何干预——自然滚动虽生硬，但稳定可靠
• 避免同时引入 CSS + JS 双重平滑逻辑（比如既设 scroll-behavior，又给所有 a[href^="#"] 绑 preventDefault() + scrollTo）

真正容易被忽略的是：当页面存在多个滚动上下文（如侧边栏固定高度 + overflow: auto），scroll-behavior 只作用于它所在的那个容器，不会“穿透”到父或子滚动区。这时候得单独给对应容器设置，而不是只盯 html。