用 transform 做视差滚动更靠谱，因其触发硬件加速、避免重排，配合 requestAnimationFrame 节流和 CSS 自定义属性可精准控制各层位移；需注意图层隔离、dvh 单位及内容劫持问题。
为什么用 transform 做视差滚动比 top/left 更靠谱
因为 transform 触发硬件加速，动画更顺；而靠 top 或 margin 驱动滚动会频繁触发重排（reflow），尤其在多层叠加时卡顿明显。浏览器对 transform: translateY() 的优化最成熟，且能配合 will-change: transform 提前提示渲染引擎。
关键点：所有视差层必须设为 position: relative 或 absolute，否则 transform 位移可能脱离文档流预期；父容器需有明确高度并启用滚动（如 overflow-y: auto 或依赖页面自然滚动）。
如何用 scrollY + transform 计算各层位移量
核心逻辑是监听 window.scrollY，把不同层按比例缩放这个值，再喂给 transform: translateY()。速度越慢的层，缩放系数越小（比如背景层用 0.2 * scrollY，中景用 0.5 * scrollY，前景几乎不动）。
- 别直接在
scroll事件里反复设style.transform—— 用requestAnimationFrame节流，否则 iOS Safari 容易掉帧 - 系数别硬编码成小数，建议抽成 CSS 自定义属性（如
--parallax-speed: 0.3），方便后期微调 - 注意负号：滚动向下时
scrollY增大，要让背景“看起来”动得慢，就得用负值位移，例如translateY(calc(-1 * var(--parallax-speed) * 1px * var(--scroll-y)))（需配合 JS 注入--scroll-y）
getBoundingClientRect().top 怎么帮视差层精准入场
纯靠 window.scrollY 会让所有层从页面一开始就在动，但真实需求往往是“某层进入视口才启动视差”。这时要用 element.getBoundingClientRect().top 判断元素距离视口顶部的位置。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给每层加
data-parallax属性，值为速度系数（如data-parallax="0.2"） - 在
requestAnimationFrame回调里遍历这些元素，计算const y = (window.innerHeight - rect.top) * speed，再设transform: translateY(${y}px) - 避免用
IntersectionObserver驱动位移——它只适合开关状态（显示/隐藏），不适合连续插值动画
移动端 Safari 上 transform 视差突然失效的常见原因
不是代码写错了，大概率是 Safari 对 transform 的合成层策略更激进：如果某层没触发独立图层（layer），它会把多个 transform 合并渲染，导致位移错乱或跳变。
救急方案：
- 强制创建新图层：给视差层加
transform: translateZ(0)或will-change: transform - 禁用默认弹性滚动回弹：在滚动容器上加
-webkit-overflow-scrolling: none（慎用，可能影响手感） - 别用
vh单位设容器高度——Safari 在地址栏收起/展开时会误判vh值，改用min-height: 100dvh（dvh是动态视口单位，兼容性已覆盖 iOS 16+）
最麻烦的点其实是视差层内容本身：如果里面有 video、iframe 或 WebGL canvas，它们可能劫持合成层，导致周围 transform 失效——这种时候只能拆层隔离，或者降级为纯 CSS 关键帧动画模拟视差感。
