scroll-behavior: smooth 必须作用于实际滚动容器（通常是 html 元素），而非 body；需确保目标元素可见、已挂载、id 匹配，且用户未启用 prefers-reduced-motion，移动端需 js 降级兼容。
scroll-behavior: smooth 本身不是“CSS工具库”的功能，而是原生 CSS 属性，不需要引入任何第三方库就能用；但直接写它常因容器选错、目标不可见或浏览器不支持而失效。
scroll-behavior 写在哪个元素上才真正生效
它只对**滚动容器**起作用，且必须是实际发生滚动的元素。常见错误是只写 body { scroll-behavior: smooth; } —— Safari 和部分旧版 Chrome 会忽略，html 才是更稳妥的载体：
-
html { scroll-behavior: smooth; }是推荐写法，覆盖绝大多数桌面浏览器 - 若页面有自定义滚动容器（如
.content { overflow-y: auto; height: 400px; }），需单独给它加scroll-behavior: smooth; -
scroll-behavior不继承，父元素设了，子元素滚动仍为瞬时，必须显式设置 - 如果
html被height: 100vh; overflow: hidden;锁死，它就不再是滚动容器，该属性彻底无效
锚点跳转不平滑或完全没反应的典型原因
写了 scroll-behavior: smooth 却没效果，90% 是 DOM 或结构问题，而非 CSS 本身：
- 目标元素（如
<h2 id="faq"></h2>）尚未挂载——React/Vue 中用v-if或useState控制显示时，跳转可能早于元素渲染，offsetTop为 0 - 目标元素被
display: none或visibility: hidden隐藏，浏览器无法定位 - ID 值大小写/空格不匹配：
#FAQ和id="faq"不等价 - 初始加载带 hash（如
page.html#contact）时，CSS 可能未就绪，导致首次跳转仍是硬跳
fixed 导航栏遮挡锚点内容怎么办
滚动后标题被顶部导航栏盖住，不是 JS 计算 offset 的问题，而是 CSS 定位逻辑缺失：
- 用
scroll-margin-top给目标元素“预留空间”，例如：h2[id] { scroll-margin-top: 60px; } - 值建议与导航栏高度一致；响应式场景可用
clamp(50px, 8vh, 80px) - 别误用
scroll-padding-top：它是作用于整个滚动视口的内边距，和锚点定位无关 - 该样式必须加在目标元素自身或其选择器上，加在
html或body上无效
移动端兼容性差，怎么兜底
iOS Safari 直到 15.4 才支持 scroll-behavior: smooth，微信 X5 WebView、旧版安卓 WebView 基本不认这个声明：
- 检测支持性不能只靠
'scrollBehavior' in document.documentElement.style，应改用：typeof Element.prototype.scrollTo === 'function' - 优先用
element.scrollTo({ top: target.offsetTop, behavior: 'smooth' })，比全局 CSS 更可控 - 对不支持
behavior: 'smooth'的环境，降级为window.scrollTo(0, target.offsetTop)，或引入轻量 JS 方案（如smooth-scroll-polyfill） - 注意：某些 WebView 对
window.scrollTo({})报TypeError: Illegal invocation，改用document.scrollingElement?.scrollTo()
最易被忽略的一点：平滑滚动是否生效，从来不只是“有没有写那行 CSS”，而是滚动容器、目标元素、渲染时机、浏览器能力四者共同决定的。少一个环节，就退回硬跳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
