scroll-behavior: smooth 必须作用于 html 元素才生效，body 上无效；仅对 a[href="#id"] 和 scrollIntoView() 生效，不干预 JS 瞬时滚动；受目标可见性、滚动上下文、系统“减少动画”设置等多重限制。
scroll-behavior: smooth 必须写在 html 元素上才生效
写在 body 上基本无效，因为浏览器真正的根滚动容器是 html 元素，不是 body。你在 DevTools 里看到 body 样式有该属性，不代表它起作用——Computed Styles 里查 html 的 scroll-behavior 值才是关键。
常见干扰项包括：
-
* { margin: 0; }或 Normalize.css 可能把html的overflow设为hidden，直接废掉滚动上下文 - Next.js、Remix 等框架可能插入 wrapper
div，导致实际滚动根节点不再是html，可用document.documentElement检查 - 不要同时写
html和body两处，旧版 Chrome 可能直接忽略整个声明
只对两类行为生效：<a href="#id"></a> 和 element.scrollIntoView()
scroll-behavior: smooth 是纯 CSS 行为修饰符，不接管 JS 的滚动逻辑。它不会影响以下操作：
-
element.scrollTop = 100（瞬时赋值） -
window.scrollTo(0, 200)（默认仍是auto） - Vue Router / React Router 的路由跳转（history.pushState 不触发该 CSS）
若需 JS 控制平滑滚动，必须显式传参：element.scrollIntoView({ behavior: 'smooth' }) 或 window.scrollTo({ top: 100, behavior: 'smooth' })。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
目标元素不可见或被截断，滚动就静默失败
即使 CSS 写对了，scroll-behavior 也只在目标可滚动、目标存在且可见时才起效。典型失效场景：
- 目标元素是
display: none、visibility: hidden或opacity: 0—— 浏览器无法计算其位置 - 父级有
overflow: hidden或transform，会创建新的层叠/滚动上下文，使根滚动行为“失焦” - 动态渲染（如 Vue 的
v-if、React 的条件渲染）下，点击链接时 DOM 尚未挂载，getElementById返回null，调用scrollIntoView静默失败 - 页面内容高度不足一屏，
html实际不可滚动，加了也白加
系统开启「减少动画」时，scroll-behavior: smooth 被强制禁用
macOS / Windows 的「减少运动」偏好设置会全局禁用所有原生平滑滚动，包括 scroll-behavior: smooth 和 scrollIntoView({ behavior: 'smooth' })，浏览器静默退化为瞬跳，不报错也不提示。
可通过媒体查询响应：
code@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}注意：smoothscroll-polyfill 在这种情况下也无效——它只补老浏览器的缺失，不绕过系统级限制。真正容易被忽略的是：这个禁用是用户主动选择，强行覆盖既不可靠，也不尊重体验偏好。
