用transform替代top/left实现滚动更稳定，因避免重排且支持硬件加速；需配合will-change、raf节流、比例计算偏移、显式z-index分层、ios适配及动态视差系数调整。
scroll事件里改transform比top/left更稳
直接用top或left做滚动偏移，会触发重排（reflow），尤其在中低端设备上卡顿明显。用transform: translateY()只走合成层，浏览器能硬件加速。
实操建议：
- 所有要动的层都加
will-change: transform（但别滥用，只加在真正滚动时变化的元素上） - 监听
scroll时用requestAnimationFrame节流，避免连续触发导致掉帧 - 偏移量别硬写像素值，按滚动距离比例算：
offset = scrollY * 0.3（0.3是视差系数，越小越“远”，越大越“近”）
绝对定位层叠顺序必须靠z-index显式控制
很多人以为DOM顺序决定层叠，其实一旦用了position: absolute或position: relative，就进入新的层叠上下文，DOM顺序失效。不设z-index，浏览器按默认规则叠，结果不可控。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 背景图层被内容层盖住，明明它在HTML里写在前面
- 滚动时某一层突然“闪现”到最前，其实是z-index隐式计算冲突
使用场景：至少三个层级（比如.bg-layer、.mid-layer、.fg-layer），每层都要设z-index且数值递增，例如z-index: 1、2、10（留出余量，方便后续插中间层）
移动端iOS Safari的scroll事件不触发问题
iOS Safari默认对body滚动做优化，scroll事件可能不触发或延迟触发，尤其当页面没设height: 100%或overflow: hidden时。
解决办法：
- 监听
document.scrollingElement而不是window（兼容性更好） - 给
html和body加height: 100%; overflow-x: hidden，确保滚动容器明确 - 必要时降级用
touchmove+preventDefault模拟，但注意影响原生滚动体验
性能影响：iOS上不用passive: false注册touchmove会被强制静默，必须显式声明
视差系数别全写死，按设备性能动态调整
高端机可以跑0.5系数，低端安卓机0.1都可能掉帧。硬编码会让部分用户白屏或卡死。
实操建议：
- 用
window.devicePixelRatio和navigator.hardwareConcurrency粗筛设备能力 - 首次滚动后测一帧耗时：
performance.now()前后打点，超8ms就自动把系数砍半 - PC端可开高系数，移动端统一限制在0.3以内，iOS尤其保守（Safari渲染管线更敏感）
容易被忽略的是：CSS transform偏移量为0时，某些旧版Chrome仍会创建新图层，造成内存泄漏——所以空偏移要显式设成transform: none，别留translateY(0)
