移动端仅靠 scroll-behavior: smooth 不可靠，因 ios safari 15.4 前不支持、x5 webview 静默降级、且对 js 滚动无效；真正可控的是 js 的 scrollintoview({ behavior: 'smooth' })，需检测支持、确保元素挂载、处理滚动上下文及 sticky 遮挡。
移动端仅靠 scroll-behavior: smooth 实现可靠平滑滚动基本不可行——iOS Safari 15.4 之前完全不支持，微信 X5 等主流 WebView 静默降级为瞬移，且该 CSS 属性对 JS 主动滚动（如 window.scrollTo()）零影响。
为什么写了 html { scroll-behavior: smooth } 还是硬跳？
这不是样式写错了，而是浏览器压根没执行它。真实原因包括：
-
scroll-behavior必须作用于实际滚动容器：整页滚动的宿主是html元素，body上声明在 iOS Safari 中被直接忽略 - 目标元素被
display: none或 Vue/React 中尚未挂载，锚点跳转会静默失败或滚到顶部 - 用户系统启用了
prefers-reduced-motion: reduce，浏览器强制禁用所有平滑行为，且不报错 - 页面根滚动上下文被劫持：比如
html设置了height: 100%或overflow: hidden，导致document.scrollingElement不再是html - 局部滚动容器（如
.list { overflow-y: auto }）必须自己加scroll-behavior: smooth，不能指望html的声明“穿透”过去
移动端真正能用的平滑滚动方式只有 JS 主动调用
CSS 声明在移动端只是装饰，真正可控、可检测、可降级的只有 JS API。关键点：
- 优先用
element.scrollIntoView({ behavior: 'smooth', block: 'start' })，它比window.scrollTo()更易检测支持度，且现代 iOS Safari ≥15.4、Chrome ≥61 均支持 - 调用前必须确保目标元素已挂载并完成渲染：Vue 中避开
v-if切换后立即调用，React 中避开setState后同步调用；可用requestAnimationFrame延迟一帧 - 若目标在自定义滚动容器内（如
.chat-list），必须显式传root: chatListEl，否则默认滚动整个window - 不要混用
scrollTop = 0和scrollIntoView——前者会打断动画，造成卡顿或跳变 - 快速连续点击时建议节流，或判断
document.scrollingElement.scrollTop === 0再执行
如何检测 smooth 是否真实生效，而非静默降级？
别信 @supports (scroll-behavior: smooth) 或 'scrollBehavior' in document.documentElement.style——它们只测 CSS 解析能力，不反映 JS 行为是否可用。
- 真实检测逻辑：先确认
typeof Element.prototype.scrollIntoView === 'function' - 创建临时元素插入 DOM，调用
el.scrollIntoView({ behavior: 'smooth' }) - 监听其父容器的
scroll事件：若 100ms 内触发 ≥3 次，且event.timeStamp间隔均匀，则判定为平滑滚动；否则视为静默降级 - 部分旧版 X5 WebView 对
{ behavior: 'smooth' }参数完全不识别也不报错，必须靠行为检测，而非语法检测
最常被忽略的一点：即使你成功让 scrollIntoView 平滑滚动了，目标元素仍可能被 sticky 导航栏遮住——这不是滚动不准，而是浏览器默认把元素顶部对齐视口顶部。解决方法不是 JS 手动减 offsetTop，而是给目标元素加 scroll-margin-top: 60px（值等于导航栏高度），这个 CSS 属性才真正适配原生滚动行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
