纯CSS视差用background-attachment:fixed，但需满足三条件：明确高度、非sticky容器、无transform裁剪；移动端常失效，需JS降级+requestAnimationFrame节流优化。
能用纯 CSS 实现的视差背景，就别急着写 JS —— 但得清楚它在哪会失效、怎么补救。
background-attachment: fixed 为什么有时不动
这个属性看似最简，实际依赖三个隐性条件：元素必须有明确高度（height 或 min-height），不能是 height: auto；不能套在 position: sticky 容器里；也不能被 transform 父级裁剪（比如父元素加了 overflow: hidden 且自身有 transform）。移动端 Safari 和部分 Android WebView 会直接忽略它，不是你代码错了，是渲染引擎限制。
- 推荐写法：
.parallax-bg { min-height: 100vh; background-attachment: fixed; background-size: cover; } - 避免嵌套在
transform: translateZ(0)或will-change: transform的父容器中 - 如果必须兼容老安卓或 iOS 14 以下，得降级为 JS 方案
用 requestAnimationFrame 控制 translateY 的关键点
直接在 scroll 回调里改 element.style.transform 会导致严重卡顿，尤其在低端机上。必须用 requestAnimationFrame 节流，且滚动偏移量要提前缓存，避免重复读取 window.pageYOffset。
- 正确姿势：监听
scroll只更新一个scrollY变量，再用requestAnimationFrame读取它并批量更新样式 - 速度缩放别硬写
* 0.5，建议封装成函数：offset = scrollY * parseFloat(layer.dataset.speed || '0.3') - 记得给视差层加
will-change: transform，但别滥用 —— 只加在真正需要动画的元素上
多层视差时 data-speed 的实际表现差异
data-speed 值越小，图层移动越慢，视觉上就越“远”；负值会让图层反向移动（比如云往右飘），增强纵深感。但要注意：不同图层的 background-position 初始值必须一致，否则错位明显；而且所有图层需共用同一个滚动基准（不能各自监听 scroll）。
立即学习“前端免费学习笔记（深入）”；
- 典型组合：
background层设data-speed="0.2"，midground设"0.6"，foreground设"1.0"或"1.3" - 移动端慎用负值 speed —— 某些 Android 浏览器对负
translateY渲染异常 - 如果某层是 SVG 或 canvas，别用
transform，改用setTransform()或重绘逻辑，否则失真
真正难的不是让背景动起来，而是让动得自然又不掉帧 —— 尤其当页面已有其他 scroll listener 或 IntersectionObserver 时，滚动事件调度容易打架。这时候优先砍掉冗余监听，而不是堆更多节流逻辑。
