必须将 scroll-behavior: smooth 写在 html 元素上，因浏览器根滚动容器是 html 而非 body；仅对原生锚点跳转和未传 behavior 的 scrollintoview() 生效，js 主动滚动需显式传参 { behavior: 'smooth' }，且受系统“减少运动”偏好、ios safari 兼容性及目标元素可见性限制。
只靠 CSS 实现不了完整的平滑滚动效果，必须配合 JS 的 behavior: 'smooth' 才能生效。 单独写 html { scroll-behavior: smooth; } 只会让原生锚点跳转（比如点击 <a href="#section"></a>）变平滑，但无法处理 fixed 导航栏偏移、无法监听滚动完成、也不能用于“回到顶部”这类无目标元素的场景。
为什么 scroll-behavior: smooth 必须写在 html 上
CSS 的滚动行为控制只作用于“根级滚动容器”，而浏览器中真正的根滚动容器是 html 元素（不是 body）。写在 body 上完全无效，DevTools 里能看到样式被解析但不生效。
-
html { scroll-behavior: smooth; }是必要前提，否则所有 JS 调用（如window.scrollTo()或element.scrollIntoView()）里的behavior: 'smooth'都会静默退化为瞬移 - 旧版 Safari（iOS 15.2 及更早）不支持该属性，即使写了也无效果；iOS 15.4+ 和 Chrome 61+/Firefox 68+ 才真正可用
- 部分 macOS Safari 需要加
-webkit-scroll-behavior: smooth;前缀，但非必需——主流版本已原生支持
scrollIntoView({ behavior: 'smooth' }) 的典型误用
很多人以为给导航链接加个 data-bs-spy="scroll" 就能触发平滑滚动，其实 Bootstrap 5 的 ScrollSpy 只监听位置、不控制滚动。真正触发滚动的是你写的 JS 逻辑，且极易出错：
- 写成
element.scrollIntoView(true)或element.scrollIntoView('smooth')—— 这两种写法都已废弃，必须传对象：scrollIntoView({ behavior: 'smooth' }) - 没调用
event.preventDefault()，导致先闪一下默认锚点跳转，再执行 JS 滚动 - 目标元素存在但
offsetTop计算不准：若页面有fixed-top导航栏，得手动减去高度（如target.offsetTop - 80），否则内容被遮挡 - 对“回到顶部”这种场景错误使用
scrollIntoView—— 它需要一个真实 DOM 元素，应该改用window.scrollTo({ top: 0, behavior: 'smooth' })
移动端 Safari 惯性滚动失效怎么办
即使 scroll-behavior: smooth 生效，iOS 上滚动仍可能卡顿或失去惯性，尤其在自定义滚动容器（如 .scroll-container）中：
- 确保容器有明确的
height或max-height，不能只靠min-height - 加上
-webkit-overflow-scrolling: touch;—— 虽已被标记为废弃，但在 iOS 16/17 中仍是启用惯性滚动的实际开关 - 避免在该容器上同时使用
transform或will-change，它们可能禁用原生滚动优化 - 不要把
-webkit-overflow-scrolling加在body或html上，Safari 不支持，只对具有overflow-y: auto的子容器有效
最常被忽略的一点：CSS 和 JS 必须协同工作。漏掉 html { scroll-behavior: smooth; }，JS 写得再对也白搭；写了 CSS 却没在 JS 中显式传参，同样不会动。两者缺一不可，且没有替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
