移动端 scroll-behavior: smooth 不可靠，因 iOS Safari 15.4 前不支持、X5 WebView 静默降级，必须用 JS 主动调用 + 运行时检测 + 降级兜底。
移动端仅靠 scroll-behavior: smooth 基本不可靠，iOS Safari 15.4 之前完全不支持，微信 X5 等 WebView 常静默降级为瞬时滚动——必须用 JS 主动调用 + 运行时检测 + 降级兜底。
为什么写了 scroll-behavior: smooth 却没动画
不是 CSS 写错了，而是浏览器根本没执行它。真实原因包括：
-
scroll-behavior必须写在实际滚动容器上：整页滚动要加在html上，body上基本无效（尤其 iOS Safari） - 局部滚动容器（如
.list { overflow-y: auto; }）必须自己加scroll-behavior: smooth，不能指望 html 的声明“穿透”过去 - 目标元素被
display: none、visibility: hidden隐藏，或 Vue/React 中尚未挂载完成，点击锚点会直接跳过滚动 - 用户系统开启了
prefers-reduced-motion: reduce，所有平滑行为会被浏览器强制禁用，且不报错 - iOS Safari ≤15.3 完全忽略该声明；15.4–16.0 支持但极不稳定，常卡顿或静默失败
如何正确设置并验证生效
先确保样式写对位置，再验证是否真被识别：
- 整页滚动：只用
html { scroll-behavior: smooth; }，删掉body上同类声明 - 局部滚动容器：同时满足
overflow-y: auto+height或max-height+scroll-behavior: smooth - 别信
@supports (scroll-behavior: smooth)——它只测 CSS 解析能力，不反映 JS 行为是否可用 - 真实检测应为：
typeof Element.prototype.scrollIntoView === 'function'+ 实际调用后监听scroll事件是否延迟、连续触发 - 在开发者工具中检查目标容器的 computed styles，确认
scroll-behavior值确实是smooth，而非被重置或继承覆盖
JS 主动滚动必须显式传 behavior: 'smooth'
CSS 属性不会影响 JS 调用行为，漏传参数就等于放弃平滑：
立即学习“前端免费学习笔记（深入）”；
-
window.scrollTo(0, 100)→ 瞬时跳转；必须写成window.scrollTo({ top: 100, behavior: 'smooth' }) -
element.scrollIntoView()默认仍是behavior: 'auto'；得写成element.scrollIntoView({ behavior: 'smooth', block: 'start' }) - 目标在自定义滚动容器内（如
.chat-list），需指定root: chatListEl，否则默认滚整个 window - Vue/React 动态渲染后立即调用，
offsetTop可能为 0；建议包一层requestAnimationFrame确保 DOM 已更新 - 微信 Android WebView 需初始化时调用
webSettings.setSmoothScrollingEnabled(true)；iOS 无对应 API，只能靠 JS 降级
绕不开的兼容性坑和降级方案
当 behavior: 'smooth' 不被识别时，浏览器会静默回退为瞬时滚动，你得主动接管：
- 不要依赖
'scrollBehavior' in document.documentElement.style判断——它只测 CSS，不测 JS API - 检测逻辑应为：尝试调用
el.scrollIntoView({ behavior: 'smooth' })，并在 100ms 内监听是否触发至少 2 次scroll事件 - 降级可用
requestAnimationFrame+scrollTop逐帧逼近，但注意避免与原生动画冲突（如多次快速点击） - 固定导航栏遮挡？这不是 JS 计算问题，而是浏览器对齐逻辑——给目标元素加
scroll-margin-top: 60px（值等于导航高度） - SPA 路由跳转后不滚动？
scroll-behavior不响应pushState，必须手动在路由守卫中调用scrollIntoView或scrollTo
最常被忽略的一点：CSS 的 scroll-behavior 和 JS 的 behavior: 'smooth' 是两套独立机制，前者只管锚点跳转和未传参的 scrollIntoView，后者才真正控制每一次 JS 主动滚动。任何一端漏掉，平滑效果就断了。
