推荐用 requestAnimationFrame 节流 scroll 事件，在回调中统一读取位置并更新 transform；视差元素用 position: relative + transform，避免脱离文档流；禁用 top 改变位置，启用 GPU 加速。
怎么用 window.addEventListener('scroll') 监听滚动并触发动画
直接监听 scroll 事件本身没问题，但高频触发会导致卡顿或重复计算。必须加节流（throttle）或使用 requestAnimationFrame 做防抖——否则在快速滚动时，getBoundingClientRect() 或 scrollTop 反复读取会拖慢主线程。
推荐写法是：监听 scroll → 在 requestAnimationFrame 回调里统一读取位置 → 计算每个视差元素的偏移量。
- 别在
scroll回调里直接调用element.style.transform，每次赋值都会触发重排 - 优先用
transform: translateY()而非top，启用 GPU 加速 - 对不需要视差的元素加
will-change: transform（仅对频繁变化的元素，别滥用）
视差元素怎么定位才不破坏文档流
用 position: relative 最安全。绝对定位（position: absolute）容易脱离上下文、遮挡后续内容或导致高度塌陷；固定定位（position: fixed）则会脱离滚动容器，无法响应局部滚动（比如 overflow: auto 的 div）。
典型结构是：外层容器设 overflow-y: auto 或默认文档流滚动，内部每个视差图层用 relative + transform 偏移，靠 JS 实时更新 style.transform。
立即学习“前端免费学习笔记（深入）”；
- 避免给视差元素设
height: 100vh，它只占视口高，实际滚动区域可能更长 - 用
getBoundingClientRect().top判断是否进入视口，比单纯依赖scrollTop更可靠 - 若父容器不是
body（如某个div.scroll-container），监听对象必须是该容器，而非window
background-attachment: fixed 能不能替代 JS 视差
能，但限制极多：fixed 只在 body 级滚动下生效，且 Safari 旧版、iOS WebView、部分安卓浏览器存在渲染异常或性能问题；更关键的是，它只能做背景图位移，无法实现多层不同速度、旋转、缩放等复合效果。
纯 CSS 方案适合静态背景微动，一旦需要「某元素滚动到 50% 时开始放大，到 80% 时翻转」这类逻辑，就必须 JS 控制。
-
background-attachment: local是新标准，但兼容性差（Chrome 122+ 才稳定支持） - 用
background-position-y配合scroll()动画函数仍属实验性（@scroll-timeline），目前无主流浏览器全支持 - 如果只需简单视差，先试
fixed；但上线前务必在真机 iOS 和低端安卓上测滚动卡顿和闪屏
为什么滚动到一半视差突然跳变或错位
大概率是元素初始位置没归零，或 transform 基准点没对齐。比如图片容器用了 margin-top: 20px，但 JS 计算偏移时只改 transform，视觉上就多了一段“悬空”距离。
另一个常见原因是未考虑缩放（devicePixelRatio）或页面 zoom，导致 getBoundingClientRect() 返回的小数像素被四舍五入，累积误差明显。
- 所有视差元素初始化时确保
transform: translateY(0)，清除 inline style 干扰 - 读取位置前先调用
element.getBoundingClientRect()，别依赖缓存的offsetTop（它不随滚动实时更新） - 在
resize和orientationchange后重新采集元素位置，否则横竖屏切换后偏移全乱
