scroll-behavior: smooth 仅对可滚动容器内的 scrollintoview()、锚点跳转和 js 滚动生效；需确保目标元素存在且可见，js 调用须显式传 { behavior: 'smooth' }，兼容性受浏览器版本与渲染方式影响。
scroll-behavior: smooth 在哪里生效
它只对元素自身的 scrollIntoView() 调用、锚点跳转（#id）、以及通过 scrollTop / scrollLeft 的 JS 滚动操作起作用，前提是这些滚动发生在设置了该样式的**可滚动容器**上。
常见误区是直接给 body 或 html 加，但实际效果取决于浏览器如何解析根滚动容器——Chrome 和 Firefox 表现不一致，Safari 甚至可能忽略 html 上的设置。
- 最稳妥的做法：给明确的容器（如
.content）设overflow-y: auto+scroll-behavior: smooth - 全局平滑滚动？优先写
html { scroll-behavior: smooth; }，再加body { scroll-behavior: smooth; }做兼容兜底 - 如果容器高度固定但内容溢出，必须确保有明确的滚动上下文，否则属性无效
锚点跳转失效的典型原因
点了 <a href="#section2"></a> 没反应，或者跳转了但不平滑，大概率不是 scroll-behavior 写错了，而是 DOM 结构或目标元素出了问题。
- 目标元素（如
<h2 id="section2"></h2>）必须存在于页面中，且id值严格匹配（区分大小写、无空格） - 目标元素不能被
display: none或visibility: hidden隐藏；opacity: 0不影响，但不可见区域仍需在文档流中 - 若用 Vue/React 动态渲染内容，确保锚点元素已挂载完成后再触发跳转，否则浏览器找不到目标
-
scroll-behavior不影响window.location.hash的初始加载行为，首次进入带 hash 的 URL 时是否平滑，取决于 CSS 是否已就绪
JavaScript 中调用 scrollIntoView 的注意事项
即使设置了 scroll-behavior: smooth，手动调用 element.scrollIntoView() 时仍可能“硬跳”，因为默认行为是 { behavior: 'auto' }。
- 显式传参才能触发平滑：
el.scrollIntoView({ behavior: 'smooth' }) - 不要混用：如果容器已设
scroll-behavior: smooth，又在 JS 里传{ behavior: 'smooth' }，不会出错，但没必要重复声明 - 兼容性提醒：IE 完全不支持
behavior选项，需用scrollIntoViewIfNeeded()（仅 Safari 支持）或第三方库降级 - 滚动偏移不准？配合
block和inline参数控制对齐方式，比如{ block: 'start', behavior: 'smooth' }
性能与兼容性现实约束
scroll-behavior: smooth 看似简单，但在真实项目里常因小细节掉链子。
- 移动端 Safari 对
scroll-behavior支持较晚（iOS 15.4+），旧版本会静默忽略，不报错也不滚动 - 频繁触发滚动（如监听
scroll事件中反复调用scrollIntoView）可能导致动画卡顿，建议节流或改用requestAnimationFrame - 某些 UI 库（如 Ant Design）内部封装了滚动逻辑，可能覆盖你写的
scroll-behavior，得查源码或用!important强制（慎用） - SSR 场景下，服务端渲染时无法感知用户设备，
scroll-behavior只能靠客户端 CSS 注入或媒体查询做条件加载
真正麻烦的不是怎么写这行 CSS，而是它依赖一整条链路：DOM 存在、样式生效时机、JS 执行顺序、浏览器版本、甚至是否启用了辅助功能（部分系统会强制关闭平滑滚动）。漏掉任意一环，就只剩“为什么没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
