不能直接依赖——iOS Safari 直到 15.4 才支持，大量存量设备（尤其是 iOS 14 及更早）会完全忽略该声明；Android Chrome ≥61 支持，但微信 X5、旧版 Cordova WebView 等常禁用或静默降级。
scroll-behavior: smooth 在移动端到底能不能用
不能直接依赖——iOS Safari 直到 15.4 才支持，大量存量设备（尤其是 iOS 14 及更早）会完全忽略该声明；Android Chrome ≥61 支持，但微信 X5、旧版 Cordova WebView 等常禁用或静默降级。这意味着：html { scroll-behavior: smooth; } 写了也白写，真机上大概率还是“啪”一下跳过去。
用 element.scrollIntoView() 替代锚点跳转更可控
它比纯 CSS 更可靠，现代移动端基本都支持（iOS Safari ≥15.4、Chrome ≥61、Firefox ≥78），且能精确控制对齐方式和滚动行为：
- 必须传对象参数：
el.scrollIntoView({ behavior: 'smooth', block: 'start' })，只传true或不传会退化为瞬时滚动 - 目标元素需已挂载并可见——Vue 中用
v-if或 React 中用useState控制显示时，得等nextTick或useEffect完成后再调用，否则offsetTop为 0 - 固定导航栏遮挡？别在 JS 里手动减 offset，用 CSS 的
scroll-margin-top: 60px加在目标元素上，浏览器自动计算偏移 - 避免在
scroll或touchmove回调中高频调用它，会触发重排+重绘，iOS 上容易卡顿
AOS 这类库为什么在移动端反而更稳
它不依赖 scroll-behavior 或 behavior: 'smooth'，而是靠监听 scroll 事件 + 切换 class + CSS transition 实现动画。只要 CSS 过渡属性写对，动画就由浏览器原生渲染，兼容性反而比原生 API 更广：
- 初始化后，AOS 会为每个
data-aos元素预计算进入视口的临界位置，滚动时只做 class 切换，不操作 DOM 几何属性 - 动画效果（如
fade-up）本质是opacity+transform的 transition，这两者在移动端 GPU 加速成熟，帧率稳定 - 务必加
will-change: transform到动效元素上，尤其在position: sticky或复杂滚动容器里，否则低端 Android 容易掉帧 - 真机测试时注意：Safari 的
paint flashing工具（Web Inspector → Rendering → Paint Flashing）能直观看出是否每帧重绘，卡顿往往源于没关掉overflow: hidden或忘了加transform: translateZ(0)
最易被忽略的兼容细节
不是动画写不写得出来，而是“什么时候动、动完还剩什么”没人管：
立即学习“前端免费学习笔记（深入）”；
-
prefers-reduced-motion: reduce在 iOS/macOS 系统设置里一开，behavior: 'smooth'和 AOS 的 transition 都会静默失效，必须用@media (prefers-reduced-motion: reduce)主动关掉动画或 fallback 到 opacity/fade - 用户切后台再切回来，CSS 变量更新中断，进度条或动画可能卡在中间值不动——要监听
visibilitychange事件，手动补一帧或重置变量 - 自定义滚动容器（比如
.content { overflow-y: auto; }）上设了scroll-behavior: smooth，但父层有transform或filter，会创建新层叠上下文，导致子容器滚动行为异常，优先检查渲染层结构
