scroll-behavior: smooth 在 iOS Safari ≤15.3 等环境被完全忽略，非不生效；必须写在 html 或具体滚动容器上，受系统偏好、元素状态、父级样式及 JS 调用方式多重限制。
直接说结论：scroll-behavior: smooth 在 iOS Safari ≤15.3、微信 X5 内核、旧版 Cordova WebView 等环境中根本不会被解析，不是“不生效”，而是“被忽略”——连 computed styles 里都看不到它。
html 上写了却还是硬跳？位置和容器全错了
最常见的误操作是把 scroll-behavior: smooth 写在 body 上，或者只写在 html 却忘了页面实际滚动的是某个局部容器。
-
html是整页滚动的唯一有效作用域，body { scroll-behavior: smooth; }在 Safari 中基本无效 - 如果用了
.list { overflow-y: auto; height: 300px; }这类自定义滚动容器，必须单独给.list加scroll-behavior: smooth，html的声明不会“穿透”过去 - CSS 重置（如 Normalize.css）或某些 UI 框架可能把
html的overflow设为hidden，导致该属性静默失效
系统偏好或元素状态让它自动禁用
即使浏览器支持，也会因运行时条件被强制关闭，且不报错、不提示。
- 用户开启系统「减少动画」（
prefers-reduced-motion: reduce），Chrome/Firefox/Safari 全部静默禁用behavior: 'smooth'，CSS 和 JS 都一样 - 目标元素是
display: none、visibility: hidden，或 Vue/React 中尚未挂载完成，点击锚点会直接跳转，不触发滚动 - 父级有
transform、overflow: hidden或position: fixed，会创建新的层叠上下文或滚动截断，导致滚动目标偏移甚至失败
JS 调用不传 behavior 参数，等于没写
CSS 的 scroll-behavior 对 JS 滚动行为完全无影响——这是设计使然，不是 bug。
-
window.scrollTo(0, 200)永远瞬时；必须写成window.scrollTo({ top: 200, behavior: 'smooth' }) -
element.scrollIntoView()默认仍是behavior: 'auto'；得显式写element.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 目标在自定义滚动容器内（如
.chat-list），不传root: chatListEl就会滚整个 window，不是你想滚的地方 - SPA 路由跳转后想平滑定位，不能靠 CSS，必须在路由守卫或
useEffect中手动调用，并包裹requestAnimationFrame确保 DOM 已更新
@supports 检测根本不可靠
@supports (scroll-behavior: smooth) 只检查 CSS 解析能力，不反映底层是否真能执行平滑插值。
- iOS Safari 15.4 前返回
false，但 15.4–16.0 返回true却常卡顿或静默失败 - 真实检测应为：
typeof Element.prototype.scrollIntoView === 'function'+ 创建临时元素调用 + 监听其父容器scroll事件是否连续、延迟触发 - 微信 Android WebView 需初始化时调用
webSettings.setSmoothScrollingEnabled(true)；iOS 无对应 API，只能靠 JS 回退
真正容易被忽略的点是：你写的每一行 scroll-behavior: smooth，都依赖于一个稳定、可见、可测量的目标元素和一个明确的滚动容器。动态渲染、条件显示、嵌套滚动、系统偏好——任何一个环节断掉，它就静默退化，连 console 都不会提醒你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
