scroll-behavior: smooth在移动端不可单独依赖：iOS Safari 15.4前完全不支持，微信X5等WebView常静默降级；必须作用于html（非body）或自定义滚动容器，仅对锚点跳转和未传参的scrollIntoView()生效，JS滚动需显式传behavior:'smooth'，且须运行时检测+JS降级兜底。
scroll-behavior: smooth 在移动端不能单独靠 CSS 实现“顺畅平滑滚动”——iOS Safari 15.4 之前完全不支持，微信 X5 等 WebView 常静默降级为瞬时滚动，且它只对锚点跳转和未传参的 scrollIntoView() 生效，对 window.scrollTo() 等 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)
锚点跳转后内容被固定头部遮挡怎么办
这不是滚动错了，是浏览器把目标元素顶部对齐视口顶部，而 position: fixed 或 sticky 导航栏盖住了内容：
- 给目标元素加
scroll-margin-top: 60px（值等于导航栏高度），浏览器会在平滑滚动结束时自动预留空白 - 该属性只对锚点跳转和
scrollIntoView()生效，对scrollTo()无效 - 如果导航栏高度不固定（比如响应式折叠），优先用
scrollIntoView({ block: 'start', behavior: 'smooth' })配合目标元素的padding-top补偿，而不是 JS 动态改scroll-margin-top
真正可靠的移动端平滑滚动，从来不是“设一个 CSS 属性就完事”，而是运行时检测 + JS 主动调用 + 降级兜底三者缺一不可；最容易被忽略的是：即使 scrollIntoView({ behavior: 'smooth' }) 调用成功，在部分旧 WebView 中仍可能静默退化为瞬时滚动，必须监听 scroll 事件持续时间来判断是否真发生了平滑过程。
