background-attachment: fixed 在移动端失效是因 ios safari 和安卓浏览器主动禁用，为避免卡顿与内存泄漏；桌面端需注意 stacking context 和 overflow 等限制；可用 position: sticky 替代实现兼容视差效果。
background-attachment: fixed 为什么在移动端失效？
它根本不会生效——这是最常被忽略的前提。iOS Safari 和大多数安卓浏览器（包括 Chrome for Android）从很早开始就禁用了 background-attachment: fixed，因为会引发滚动卡顿、内存泄漏和手势冲突。你写对了 CSS，但 DevTools 里看到 computed 值仍是 scroll，不是 bug，是故意的。
实操建议：
- 用
getComputedStyle(el).backgroundAttachment检查运行时真实值，别只信编辑器高亮或声明顺序 - 在 iOS 真机上测试，模拟器（尤其是 Safari Web Inspector 的 responsive mode）可能错误显示为生效
- 如果项目必须支持 iOS，直接放弃这条路，后面有替代方案
桌面端实现视差时，background-attachment: fixed 的关键限制
它只对「相对于视口定位」的元素起作用，且依赖父容器不触发新的 stacking context 或 transform。稍不注意，fixed 背景就“粘”在父层而不是视口上。
常见错误现象：
- 背景随容器一起滚动，像没加
fixed一样 - 背景位置错位、重复偏移、甚至消失
原因和对策：
-
transform、opacity 、<code>will-change、filter都会让父元素创建 stacking context，导致fixed相对父容器而非视口 → 移除这些属性，或用isolation: isolate隔离 - 父容器设了
overflow: hidden或scroll→ 改为visible，或把背景移到更外层（如） - 背景图尺寸/位置未配合
background-size: cover和background-position: center center→ 视差抖动明显，尤其在缩放时
真正可用的轻量级视差替代方案（不用 JS 库）
用 position: sticky + 层级差模拟，兼容性好、性能可控、iOS 安卓全平台生效。
核心思路：让背景层比内容层“滚动得慢”，靠不同层的 top 偏移速率差形成视差感。
实操代码片段：
.parallax-bg {
position: sticky;
top: 0;
height: 100vh;
background-image: url(./bg.jpg);
background-size: cover;
background-position: center;
z-index: -1;
}
.content {
position: relative;
/* 内容层正常流式布局，自然滚动 */
}
要点说明：
-
position: sticky在滚动时保持固定位置，但不会像fixed那样脱离文档流，所以不受 stacking context 影响 - 必须设
height: 100vh，否则 sticky 不触发；若内容高度不足，可加min-height: 100vh - 要多层视差？给多个
.parallax-bg设不同background-position偏移值，再用transform: translateY()微调速率
什么时候该切到 IntersectionObserver + transform 方案？
当需要精确控制多个元素的视差强度（比如每滚动 1px，背景移动 0.3px），或需响应式断点切换视差系数时，CSS 层级方案就不够用了。
这时候用 JS 是合理选择，但不必上 requestAnimationFrame 死循环：
- 监听
IntersectionObserver的boundingClientRect.top，算出当前滚动进度 - 只对进入视口的元素应用
style.transform = `translateY(${offset}px)` - 避免直接读取
window.scrollY—— 触发重排，且在 iOS 上不可靠 - 用
passive: true注册 scroll 事件（如果非要监听），防止被浏览器强制降级
复杂点不在代码长度，而在滚动方向判断、节流时机、以及 iOS 中 scrollTop 在 overscroll 时返回负值带来的偏移偏差。这些细节不处理，视差就会在边缘抽搐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
