scroll-behavior 必须设在滚动容器上，通常为 html 元素（html { scroll-behavior: smooth; }），设在 body 无效；自定义滚动容器（如 overflow: auto 的 div）可直接设置，但避免与 html 冲突；safari 15.4+ 才支持非 html 元素。
scroll-behavior设在哪个元素上才生效
scroll-behavior 必须设在滚动容器上，通常是 html 或 body，但要注意：只设 body 在多数浏览器里无效。真正起作用的是 html 元素的 scroll-behavior: smooth。
常见错误是写成：
body { scroll-behavior: smooth; }
结果毫无反应——因为页面级滚动由 html 控制（除非你禁用了 body 的默认滚动并把滚动委托给某个 div）。正确写法是：
html { scroll-behavior: smooth; }
- 如果用了自定义滚动容器（比如
overflow: auto的div），那就直接给那个div加scroll-behavior: smooth - 不要同时给
html和自定义容器都设，容易冲突 - Safari 15.4+ 才支持
scroll-behavior在非html元素上生效，旧版 Safari 只认html
锚点跳转时定位不准或偏移
启用 scroll-behavior: smooth 后，点击 <a href="#section"></a> 跳转，目标元素顶部常被固定导航栏遮住。这不是 scroll-behavior 的问题，而是滚动终点计算没考虑 offset。
解决方法不是改 CSS，而是用 scrollMarginTop 往目标元素上加“预留空间”：
#section { scroll-margin-top: 60px; }
-
scroll-margin-top是配合平滑滚动的关键补位属性，不写它，就大概率偏移 - 值建议用 px 或 rem，避免用 %（计算时机可能导致不稳定）
- 如果导航栏高度动态变化（比如缩放后变高），纯 CSS 难以覆盖，这时得切到 JS 用
element.scrollIntoView({ block: 'start', behavior: 'smooth' })手动控制
JavaScript调用scrollIntoView失效或卡顿
直接调 element.scrollIntoView(true) 不会触发平滑滚动，必须显式传入 { behavior: 'smooth' } 选项。
但即使写了，也可能卡住或跳回顶部，常见原因有：
- 目标元素未渲染完成就调用（比如在
useEffect或mounted里没等 DOM 稳定）→ 加个requestAnimationFrame延迟一帧 - 父容器设置了
overflow: hidden或transform，导致滚动上下文被截断 → 检查祖先元素的overflow和transform声明 - 在 iOS Safari 中，
scrollIntoView对position: sticky元素行为异常 → 改用window.scrollTo计算偏移量手动滚动
兼容性与降级处理的实际取舍
Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+ 支持 scroll-behavior；更老的 Safari 和所有 IE 完全不支持。但强行 polyfill（比如用 smooth-scroll 库）反而容易和原生行为冲突，尤其在监听 hashchange 时。
更务实的做法是：
- 只对现代浏览器启用平滑滚动，用
@supports (scroll-behavior: smooth)包裹 CSS - JS 中先检测
'scrollBehavior' in document.documentElement.style，再决定是否传behavior: 'smooth' - 别试图让老浏览器“看起来一样”，接受它硬跳，重点保障滚动可到达、不丢失锚点
平滑滚动不是功能刚需，而是体验增强；一旦开始纠结“所有设备都要一模一样”，就很容易掉进 CSS 动画卡顿、JS 重排抖动、hash 同步错乱这些深坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
