scroll-behavior: smooth 仅对实际滚动容器生效，非全局；JS 滚动需显式传 { behavior: 'smooth' }，否则无效；iOS Safari ≤15.3 不支持，系统减少动画会强制禁用。
加了 scroll-behavior: smooth 没反应，90% 是因为没加在正确容器上，或 JS 调用时漏传 { behavior: 'smooth' }。
scroll-behavior: smooth 必须作用于滚动容器本身
它不是全局开关，只对设置了该样式的、**实际产生滚动的容器**生效。浏览器不会“继承”这个行为。
- 整页锚点跳转：必须写在
html上（body不可靠，Safari 尤其容易忽略） - 局部滚动区域（如侧边菜单、聊天记录框）：得给那个
div同时设overflow: auto和scroll-behavior: smooth - 如果容器
height固定但内容没溢出，或者被overflow: hidden截断，属性直接无效 - 检查 computed styles：在开发者工具里看目标元素的
scroll-behavior是否真为smooth，别只信源码
JS 滚动调用不自动继承 CSS 行为
scroll-behavior: smooth 对 window.scrollTo()、element.scrollTop = 这类直接赋值操作完全无效——它只管锚点跳转和 scrollIntoView() 的默认行为。
-
element.scrollIntoView()默认仍是behavior: 'auto'，必须显式传参：el.scrollIntoView({ behavior: 'smooth' }) -
window.scrollTo(0, 100)会硬跳；要平滑就得写成：window.scrollTo({ top: 100, behavior: 'smooth' }) - 即使 CSS 已设
html { scroll-behavior: smooth }，JS 调用仍优先按自己传的参数走；不传就退化为 instant - Vue/React 中动态渲染的锚点，需确保元素已挂载完成再调用
scrollIntoView()，否则静默失败
常见失效场景与绕不过的兼容性坑
不是代码写错，而是环境或交互链路断了。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari ≤15.3 完全不支持
scroll-behavior: smooth和behavior: 'smooth'参数，15.4+ 才稳定；旧版只会静默降级，不报错也不动画 - 用户开启系统“减少动画”（
prefers-reduced-motion: reduce），Chrome/Firefox/Safari 都会强制禁用所有smooth行为 - 固定定位导航栏遮挡锚点：不是 JS 计算偏移，而是给目标元素加
scroll-margin-top: 60px（值等于导航栏高度） - SPA 路由跳转后不滚动：CSS 属性不响应
history.pushState()或路由更新，必须手动调用scrollIntoView()或scrollTo() - 锚点元素被
display: none、visibility: hidden或尚未挂载，点击链接也不会触发任何滚动
最常被忽略的是：scroll-behavior 只控制“谁来滚”，而 JS 的 behavior 参数决定“怎么滚”，两者职责分明，不能互相替代；一端漏配，效果就断在半路。
