scroll-behavior: smooth 必须写在 html 元素上才生效，因浏览器根滚动容器是 html 而非 body；写在 body 上无效，即使 devtools 显示已应用；正确写法仅 html { scroll-behavior: smooth; }。
scroll-behavior: smooth 必须写在 html 上才生效
浏览器的根滚动容器是 html 元素，不是 body。写在 body 上完全无效——哪怕 DevTools 里显示样式已应用，滚动依然生硬。
常见错误现象：body { scroll-behavior: smooth } 看似合理，实则被忽略；微前端或 CMS 渲染后实际根节点可能被包裹（比如 #app 外还有 <div id="root">），此时需用 <code>document.documentElement 确认是否仍是原生 html。
- 正确写法只有一行：
html { scroll-behavior: smooth; } - 别同时加在
html和body上，旧版 Chrome 可能降级为auto - 若用了 CSS 重置（如
* { margin: 0; }），检查是否意外设置了html { height: 100%; overflow: hidden; }—— 这会截断根滚动上下文
scrollIntoView({ behavior: 'smooth' }) 调用前必须验证三件事
动态渲染场景下（Vue 的 v-if、React 的条件渲染、或异步插入 DOM），getElementById 返回 null 或元素不可见时，调用会静默失败：控制台不报错，但滚动不动。
- 元素是否存在且可见？用
if (!el || !el.offsetParent)判断 ——offsetParent === null表示被隐藏、未挂载或display: none - 滚动上下文是否正确？如果目标在
overflow: hidden的父容器里，scrollIntoView仍会尝试滚动document，而非你预期的局部容器 - 系统是否禁用动效？macOS / Windows 开启「减少运动」后，
behavior: 'smooth'自动退化为'auto'，这是浏览器行为，无法绕过
固定头部遮挡目标？优先用 scroll-margin-top，别手算偏移
在 JS 里硬减 header 高度（比如 window.scrollTo({ top: el.offsetTop - 80 })）极易因响应式变化、字体加载延迟、或 flex/grid 布局导致错位。
- 优先用 CSS：
h2 { scroll-margin-top: 80px; }（数值等于你的 fixed header 高度） - 或调用时加
block: 'center'：el.scrollIntoView({ behavior: 'smooth', block: 'center' }) - 二者可共存：
block: 'center'保证居中，scroll-margin-top微调起点，更鲁棒
局部滚动容器启用平滑滚动要显式设 scroll-behavior
scroll-behavior: smooth 不继承，必须直接写在可滚动容器上，且该容器得满足基本滚动前提。
- 容器必须有固定尺寸 +
overflow: auto（或scroll、overlay） - 示例：
.chat-history { height: 400px; overflow-y: auto; scroll-behavior: smooth; } - 若容器内元素是
display: none或尚未渲染，scrollIntoView会静默失效 —— 动态内容务必等挂载完成再调用
复杂点在于：滚动是否生效，从来不只是“加个 smooth”这么简单。它依赖 DOM 可见性、滚动上下文归属、系统动效策略、CSS 层叠顺序四者同时满足。最容易被忽略的是——你以为在滚动容器，其实浏览器正在滚动整个文档。
