移动端 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 支持但极不稳定，常卡顿或静默失败
如何正确设置并验证 scroll-behavior 是否生效
先确保样式写对位置，再验证是否真被识别：
- 整页滚动：只用
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，而非被重置或继承覆盖
scrollTo 和 scrollIntoView 必须显式传 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 降级
移动端列表滚动必须单独处理，不能依赖全局 html 声明
scroll-behavior: smooth 对自定义滚动容器才真正起作用，且 iOS Safari 15.4 前不支持：
- 必须把
scroll-behavior: smooth显式加到那个可滚动的列表容器上，例如：.list-container { overflow-y: auto; scroll-behavior: smooth; } - 如果容器用了
overflow: hidden或没设高度/溢出，scroll-behavior直接被忽略 - 某些 UI 框架（如 Ionic、Vant）会包裹一层
transform容器，导致目标元素脱离标准滚动流，此时即使样式写了也不触发平滑 - 调用
scrollIntoView时务必传root，否则滚动的是window而非列表容器 - 安卓 WebView 和微信 X5 内核常把
{ behavior: 'smooth' }当作非法参数忽略，不报错但滚动变硬跳——必须靠行为检测（监听 scroll 事件频率）而非语法检测
最易被忽略的一点：即使你写了 html { scroll-behavior: smooth; }，JS 主动调用 scrollIntoView() 仍默认是硬跳；而 iOS Safari 15.4+ 对 CSS 声明的支持依然不稳定，实际项目中几乎总要 fallback 到 JS 方案。
