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 可能直接忽略整个声明
只对两类行为生效：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' })。
目标元素不可见或被截断，滚动就静默失败
即使 CSS 写对了，scroll-behavior 也只在目标可滚动、目标存在且可见时才起效。典型失效场景：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 目标元素是
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 在这种情况下也无效——它只补老浏览器的缺失，不绕过系统级限制。真正容易被忽略的是：这个禁用是用户主动选择，强行覆盖既不可靠，也不尊重体验偏好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
