推荐用 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。
立即学习“前端免费学习笔记（深入）”；
