最常见的原因是父容器拦截滚动行为，scroll-behavior仅对html或设置了overflow:auto/scroll的局部容器生效，且需确保样式作用于html而非body、无覆盖规则、目标环境支持、无prefers-reduced-motion限制及元素在文档流中。
scroll-behavior: smooth 为什么加了没反应
最常见的情况是：你写了 html { scroll-behavior: smooth; }，但点击锚点或调用 scrollIntoView() 时依然“啪”一下跳过去。原因通常是父容器拦截了滚动行为——scroll-behavior 只对**直接触发滚动的根容器（即 html）或设置了 overflow: auto/scroll 的局部容器**生效，且该容器必须是滚动上下文的“源头”。
- 确保样式写在
html元素上（不是body），且没有被更具体的规则覆盖（比如某些 UI 框架重置了html的overflow） - 如果页面使用了自定义滚动容器（如
div带overflow-y: auto），那得给那个div加scroll-behavior: smooth，而不是html - 部分旧版 Safari（≤15.4）和所有 IE 完全不支持该属性，需检查目标环境
scrollIntoView({ behavior: 'smooth' }) 被忽略的条件
JS 主动滚动时，scrollIntoView() 的 behavior: 'smooth' 不是万能开关，它依赖底层是否启用平滑滚动策略。一旦触发条件不满足，会自动退化为 instant。
- 用户在 macOS 上启用了“减少动画”系统偏好（
prefers-reduced-motion: reduce），Chrome/Firefox 会静默禁用behavior: 'smooth'，哪怕代码里写了也无效 - 目标元素不在当前文档流中（例如 display: none、visibility: hidden 或未挂载的 Vue/React 组件），调用会静默失败，不会报错但也不滚动
- 若同时设置
block: 'nearest'和inline: 'nearest'，部分浏览器可能因无法精确计算偏移而降级
CSS 平滑滚动和 JS 滚动行为的冲突点
当 CSS 设置了 scroll-behavior: smooth，又在 JS 中调用 element.scrollIntoView({ behavior: 'auto' })，实际效果仍可能是平滑的——因为 CSS 规则优先级更高。反过来，如果 CSS 没开，仅靠 JS 参数也无法强制开启（除非浏览器支持且无系统限制）。
- 不要指望用 JS 参数覆盖全局 CSS 行为；想彻底禁用某次滚动的平滑效果，只能临时改 CSS（如给滚动容器加类名切换
scroll-behavior） -
window.scrollTo()不受scroll-behavior影响，必须显式传{ behavior: 'smooth' }才行 - SPA 中路由跳转后自动滚动到顶部，Vue Router / React Router 默认用
scrollTo(0, 0)，需手动包裹成scrollTo({ top: 0, behavior: 'smooth' })
移动端 Safari 的兼容性陷阱
iOS 15.4+ 支持 scroll-behavior，但有个隐蔽问题：如果页面有 viewport meta 设置了 height=device-height 或 user-scalable=no，部分机型会禁用平滑滚动，表现为卡顿或直接失效。
- 保持 viewport 最简：推荐用
<meta name="viewport" content="width=device-width, initial-scale=1">，避免任何 height 或 user-scalable 限制 - Safari 对
scroll-behavior的实现比 Chrome 更保守，比如在 iframe 内嵌页中几乎总是失效 - 测试时务必真机验证，模拟器常表现正常但真机掉帧严重——尤其是内容高度动态变化的列表页
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
