scroll-behavior: smooth 在移动端基本失效，因 ios safari 15.4 前不支持、x5 等 webview 静默降级，且仅作用于可滚动容器的 a 标签跳转和 history 滚动，无法控制 js 主动滚动。
scroll-behavior: smooth 在移动端不能单独依赖 CSS 声明来实现可靠平滑滚动——iOS Safari 15.4 之前完全忽略，微信 X5 内核等 WebView 多数静默降级，必须用 JS 主动调用 + 运行时检测 + 降级兜底。
scroll-behavior: smooth 为什么在移动端基本失效
CSS 的 scroll-behavior: smooth 只对「可滚动容器」生效，且仅当该容器是文档根（html）或显式设置了 overflow-y: auto|scroll 的块级元素时才起作用。但关键限制在于：
- iOS Safari 直到 15.4 才开始解析该声明，旧版（包括大量仍在使用的 iOS 14/15.0–15.3 设备）会直接丢弃整条规则，回退为瞬时滚动
- Android Chrome ≥61 支持，但微信内置浏览器（X5 内核）、部分 Cordova/WebView 容器默认禁用或未启用滚动动画引擎
- 即使支持，它只影响
a[href="#id"]点击跳转、history.pushState后的scrollRestoration: 'auto'行为，无法控制 JS 主动滚动
用 Element.scrollIntoView({ behavior: 'smooth' }) 替代 window.scrollTo
现代移动端浏览器（iOS Safari ≥15.4、Chrome ≥61、Firefox ≥78）基本支持 scrollIntoView 的 behavior: 'smooth' 选项，比全局 CSS 更可控、更易检测和降级：
- 优先调用
targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' })，避免手动算offsetTop—— 后者在position: fixed容器、transform 层叠上下文、overflow: hidden父级中极易偏移 - 必须确保目标元素已挂载并完成渲染：Vue 中避开
v-if切换后立即调用，React 中避开setState后同步调用；可用requestAnimationFrame延迟一帧 - 若目标在自定义滚动容器内（如
.list { overflow-y: auto; }），需显式传root: listContainer，否则默认滚window - 微信内嵌页需额外处理：Android 端初始化 WebView 时调用
webSettings.setSmoothScrollingEnabled(true)；iOS 端无 API，只能靠 JS 降级
如何检测 smooth 滚动是否真实生效
不能只查 'scrollBehavior' in document.documentElement.style —— 这只测 CSS 属性支持，不反映 JS 行为是否被实现。真实检测逻辑应为：
- 先确认
typeof Element.prototype.scrollIntoView === 'function' - 创建临时元素插入 DOM，调用
el.scrollIntoView({ behavior: 'smooth' }) - 监听其父容器的
scroll事件：若 100ms 内触发 ≥3 次，且event.timeStamp间隔均匀，则判定为平滑滚动；否则视为静默降级 - 部分 WebView（如旧版 X5）对
{ behavior: 'smooth' }参数完全不识别，也不报错，必须靠行为检测而非语法检测
降级方案别写太重：requestAnimationFrame + scrollTop 就够用
引入 full polyfill（如 smoothscroll-polyfill）体积大、兼容逻辑复杂，实际项目中更推荐轻量降级：
- 用
document.scrollingElement?.scrollTop读取当前滚动位置（比window.pageYOffset更健壮） - 目标位置用
targetEl.getBoundingClientRect().top + window.scrollY计算，避免 offsetTop 失效问题 - 缓动用
easeOutCubic或简单线性插值即可，无需物理模拟；总时长控制在 300–400ms，过长易被用户中断 - 务必在
touchmove事件触发时取消动画（cancelAnimationFrame），否则用户手动拖拽时会出现“滚动打架”卡顿
最易被忽略的一点：平滑滚动不是加了 behavior: 'smooth' 就万事大吉——它和触摸事件、虚拟滚动、fixed 容器、WebView 初始化配置深度耦合，漏掉任一环节，效果就断在真实设备上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
