background-attachment: fixed 在移动端失效是因为 iOS Safari 和 Android Chrome v99+ 主动将非 body 元素的该属性降级为 scroll；唯一稳定生效场景是设在 body 或根级全屏容器上且父容器无 transform/filter 等触发新层叠上下文的样式。
background-attachment: fixed 为什么在移动端失效
它不是写错了，而是被浏览器主动忽略——iOS Safari 和 Android Chrome v99+ 会把非 body 元素上的 background-attachment: fixed 计算值强制改成 scroll。你检查 DevTools 的 Computed 样式就能验证：搜 background-attachment，看到的值是 scroll 而不是 fixed，就说明已被降级。
常见错误现象包括：桌面端正常、手机一滑背景跟着动；嵌套在 transform 或 filter 容器里的视差层完全不生效；加了 z-index 也盖不住内容层——因为 background-attachment: fixed 不创建层叠上下文，z-index 对它根本不起作用。
真正能稳定生效的场景极窄：
- 必须设在
body或根级全屏容器（如.parallax-section { min-height: 100vh; }）上 - 父容器不能有
transform、perspective、filter、opacity 等触发新层叠上下文的样式 - 配套必须写全：
background-size: cover、background-position: center、background-repeat: no-repeat
用 position: fixed + transform 实现多层视差
这才是目前兼容性最好、可控性最强的方案。每层都是真实 DOM 元素，靠 z-index 显式排序，靠 transform: translateY() 驱动位移——不触发布局（layout），iOS 滚动不会卡顿。
立即学习“前端免费学习笔记（深入）”；
结构要点：
- 所有视差层统一设
position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -
z-index显式分层：远层设z-index: 1，中层z-index: 10，近层z-index: 100（留余量防插队） - 滚动时只改
transform: translateY()，例如layer.style.transform = `translateY(${scrollY * 0.3}px)` - 绝对不要用
top或margin-top——触发 layout，iOS 上一卡一个准 - 开始滚动后动态加
will-change: transform，避免空转耗资源
perspective + translateZ 模拟 3D 深度感
这不是“纯 CSS 实现”，必须配合 JS 监听滚动并动态更新 transform: translateZ() 值。它的优势在于能模拟真实空间距离感，但代价是性能开销更大，且移动端需谨慎。
关键约束：
-
perspective必须设在父容器上，值越小（如perspective: 1px）视差越强，但容易失真；建议从500px起调 - 父容器必须加
transform-style: preserve-3d，否则子元素的translateZ无效 - 各层的
translateZ应为负值（如-100px、-200px），数值越大越“远” - 移动端慎用：过多
preserve-3d层级易触发渲染瓶颈，部分安卓 WebView 会直接 fallback 到 2D
滚动监听怎么写才不卡
直接绑 window.addEventListener('scroll', handler) 是最常见也最危险的做法——滚动事件高频触发，频繁读写 DOM 会导致掉帧。
正确做法：
- 用
requestAnimationFrame节流，只在下一帧执行位移计算 - 缓存
window.scrollY，避免每次都在 handler 里重复读取 - 视差系数别硬编码成像素值，改用比例计算：
const ratio = window.scrollY / (document.body.scrollHeight - window.innerHeight)，适配不同屏幕高度 - 如果用
background-position模拟位移，务必用像素单位（px），别混用百分比——background-position: center 50%的锚点逻辑和直觉相反，极易偏移错乱
滚动本身不复杂，难的是在不同设备、不同嵌套层级、不同渲染上下文中保持行为一致。最容易被忽略的点是：你以为在控制“背景”，其实是在控制“元素层级”；你以为在调参数，其实是在调浏览器的渲染策略。
