background-attachment: fixed 在 ios safari 和多数安卓 webview 中被浏览器主动禁用以保障滚动性能；移动端应改用 scroll-driven animations、position: sticky 或 background-position + requestanimationframe 三种替代方案。
background-attachment: fixed 在 iOS Safari 和多数安卓 WebView 中根本不会生效——不是你写错了，是浏览器主动禁用它来保滚动流畅性。想在移动端做出稳定视差，得绕开这个属性，改用可预测、可控制的方案。
为什么 background-attachment: fixed 在手机上查无此效
你在 DevTools 的 Styles 面板里看到写了 background-attachment: fixed，但点开「Computed」一看，值却是 scroll。这不是 CSS 解析失败，是 WebKit 和 Chromium for Android 主动降级的结果。iOS 15+ 起连加 transform: translateZ(0) 或 will-change: transform 都唤不醒它；微信内置浏览器、QQ 浏览器、华为浏览器同理。
常见错误现象包括：背景图随页面一起“滑走”、边缘突然露白、松手后残留错位感。这些都不是 JS 没节流或图片没设 background-size: cover 导致的，而是渲染路径从一开始就没走对。
- 别在媒体查询里给移动端套
fixed样式——这部分 CSS 实际上被当作文本忽略 - 父容器只要带
transform、filter、overflow: hidden，fixed就立刻退化 -
body上设fixed也未必生效，Chrome v99+ 要求它必须是“根滚动容器”
移动端真正可用的三种替代方案
没有银弹，但有明确优先级：能用纯 CSS 就不用 JS；能用声明式就不用命令式；能用浏览器原生能力就不用 polyfill。
-
首选：
scroll-driven animations（Chrome 115+ / Safari 17.4+）：绑定@scroll-timeline，用animation-range控制每层入场/持续区间，再配合@keyframes里写死的translateY值。它不依赖 JS，响应滚动进度而非像素值，且在移动端稳定 -
次选：
position: sticky+ 负top：不需要 JS，靠层叠偏移模拟滞后感。关键值是top: -50vh，配合显式height: 200vh才触发。注意不能和transform同元素共存，否则失效 -
兜底：
background-position+requestAnimationFrame：监听document.scrollingElement.scrollTop，动态设element.style.backgroundPosition = 'center ' + (scrollTop * 0.4) + 'px'。必须显式写background-attachment: scroll覆盖继承值
JS 驱动时最容易踩的三个坑
哪怕你决定用 JS，也不能直接往 scroll 事件里塞 style.transform——尤其在 iOS Safari 上，这等于每帧都触发 layout → paint → composite，掉帧是必然的。
- 读取滚动值必须用
document.scrollingElement.scrollTop，不是window.pageYOffset或document.body.scrollTop（后者在启用了scroll-behavior: smooth的页面中常为 0） - 位移计算必须放进
requestAnimationFrame回调，且只读一次scrollTop；不要在回调里反复调用getBoundingClientRect()，它本身触发 layout -
will-change: transform只加在真正执行位移的 DOM 元素上（比如.parallax-layer），加在父容器或伪元素上完全无效；且必须滚动开始时动态加、停止 100ms 后动态删，长期挂着会吃 GPU 内存
真正麻烦的不是怎么写第一层视差，而是让三套方案（scroll-driven、sticky、JS + background-position）在不同浏览器里自动降级、无缝切换。这意味着你得用 @supports (animation-timeline: --tl) 检测原生支持，用 matchMedia('(pointer: coarse)') 判断是否触屏设备，再决定加载哪套逻辑——而这些判断本身，就得在首屏 JS 里跑完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
