移动端 ios safari 禁用 background-attachment: fixed，应改用 transform + requestanimationframe 实现视差；需缓存滚动值、加 passive 监听、合理使用 intersectionobserver 替代全局 scroll。
background-attachment: fixed 在移动端根本不动，别白费劲
这不是你代码写错了，是 iOS Safari 主动禁用 background-attachment: fixed——哪怕加了 -webkit-background-attachment: fixed，真机上照样静止。桌面端能跑，不代表它能在手机上工作。
常见错误现象：background-attachment: fixed 写对了，但滚动时背景完全不随视口“钉住”，或者只在页面加载瞬间闪一下就卡死。根本原因在于 WebKit 强制降级该行为，尤其当父容器有 transform、overflow: hidden 或嵌套在 position: sticky 里时，直接失效。
- 必须给视差区块设明确高度，比如
min-height: 100vh（不能用height: auto） - 禁止在
overflow: hidden容器内使用该属性 - 避免与
position: sticky元素共存，否则整个层叠上下文崩塌 - 移动端兼容性极差，个人页或企业官网若需稳定交付，应直接跳过此方案
用 transform: translateY() + requestAnimationFrame 才算真正可控
核心不是“怎么算偏移”，而是“怎么不卡”。直接在 scroll 回调里改 element.style.transform 会高频触发重排重绘，低端安卓和 iOS 尤其掉帧。正确做法是缓存滚动值，统一在下一帧更新。
- 监听
scroll时务必加{ passive: true }：否则 iOS/Android Chrome 会强制同步执行，阻塞滚动主线程，三秒内就卡顿甚至白屏 - 给每个视差层加
data-speed="0.2"（背景）或data-speed="0.8"（前景），系数越小越“远” - 位移计算用
window.scrollY * speed，别频繁调用getBoundingClientRect() - 提前设置
will-change: transform或transform: translateZ(0)，否则首帧易撕裂 - 元素需有
position: relative或position: absolute，否则transform可能不生效
自定义元素（Custom Element）里封装视差逻辑更干净
用 class ParallaxElement extends HTMLElement 把初始化、滚动绑定、位移计算全包进去，比全局 JS 更易复用、更少污染作用域。关键点不在“自定义”，而在生命周期控制是否合理。
- 在
connectedCallback中初始化：获取this.dataset.speed、绑定带{ passive: true }的scroll监听器 - 滚动回调里只做一件事：更新一个内部
this._scrollY缓存值，不操作 DOM - 用
requestAnimationFrame在render()方法里统一更新所有实例的style.transform - 在
disconnectedCallback中清除监听器，防止内存泄漏 - 别在
attributeChangedCallback里实时响应data-speed变更——滚动中动态改速会导致抖动，应仅在初始化时读取一次
别忽略 IntersectionObserver 的轻量替代场景
如果你的“视差”其实只是某个区块进入视口时才动一下（比如标题上浮+缩放），完全没必要监听全局滚动。用 IntersectionObserver 更精准、更省资源，且天然规避 passive 和节流问题。
- 适用于单次触发类动画：文字上移、图标浮现、图片淡入等
- 观察目标进入视口比例（如
threshold: 0.1）后，再启动requestAnimationFrame动画序列 - 比 scroll 监听节省至少 60% 的 CPU 占用，尤其在长页面中优势明显
- 注意：它不适用于持续滚动过程中的连续位移（如多层背景平滑移动），那是
scroll+rAF的主场
视差效果真正的复杂点不在“怎么动”，而在于“什么时候不该动”——滚动未开始前别提前渲染，元素已滚出视口后及时暂停，移动端触摸惯性结束前要补最后一帧。这些细节不处理，再漂亮的动画也会在真实设备上露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
