scroll-behavior: smooth 仅对原生锚点跳转和显式声明 behavior: "smooth" 的 scrollIntoView()/scrollTo() 生效，JS 主动滚动必须手动传参，且需兼顾兼容性与目标元素存在性、可见性及文档流位置。
直接加 scroll-behavior: smooth 就能启用平滑滚动，但仅对原生锚点跳转（a[href="#id"]）和 element.scrollIntoView() 有效，JS 手动调用 window.scrollTo() 默认不走这个行为。
scroll-behavior: smooth 的生效范围有限
它只影响由用户点击链接或浏览器原生滚动 API 触发的滚动，比如：
-
@#@#@#@#@#@#@#@#@#@0点击后自动平滑 -
document.getElementById("section2").scrollIntoView({ behavior: "smooth" })显式声明才生效（注意：不写behavior会退化为瞬间滚动） -
window.scrollTo({ top: 100, behavior: "smooth" })同样必须显式传参，scroll-behavior: smooth对它没影响
常见误区是以为设了全局 html, body { scroll-behavior: smooth; } 就万事大吉——其实 JS 主动滚动仍需手动指定 behavior。
兼容性与回退方案要提前考虑
scroll-behavior 在 Chrome 61+、Firefox 36+、Safari 15.4+ 支持，但 Safari 15.2–15.3 有 bug：设在 body 上无效，必须设在 html 上；iOS Safari 15.4+ 才真正稳定。
若需兼容旧版 Safari 或 IE，不能只依赖 CSS，得 fallback 到 JS 方案：
- 检测是否支持：
if ("scrollBehavior" in document.documentElement.style) - 不支持时，用
requestAnimationFrame+ 线性插值手动实现滚动动画 - 避免用 jQuery 的
.animate()，它在 iOS 上可能卡顿或触发页面重排
滚动目标元素必须可滚动且存在文档流中
如果目标元素被 display: none、visibility: hidden 或 opacity: 0 隐藏，scrollIntoView 会失败或滚动错位；同样，若目标在 overflow: hidden 容器内且未设 scroll-behavior，外层页面滚动不会带动它内部平滑滚动。
典型问题场景：
- 单页应用路由切换后，目标
id元素尚未渲染完成，scrollIntoView找不到节点 → 应配合setTimeout或MutationObserver等待 DOM 就绪 - 使用
position: fixed或transform的元素脱离文档流，scrollIntoView可能计算偏移错误 → 改用getBoundingClientRect().top + window.scrollY手动算位置
真正麻烦的不是加那行 CSS，而是滚动目标是否真实存在、是否在可视区域计算逻辑里被忽略、以及 JS 调用时有没有漏掉 { behavior: "smooth" } —— 这三点出错，scroll-behavior: smooth 就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
