background-attachment: fixed 在现代浏览器中为什么失效了
因为 iOS Safari 和 Android Chrome 从某个版本起，为提升滚动性能和触控体验，**默认禁用了 background-attachment: fixed 在非 body 元素上的行为**。你写对了 CSS，但页面一滑，背景图跟着动——不是你代码错了，是浏览器“帮你优化”掉了。
常见错误现象：background-attachment: fixed 在移动端完全无效；在桌面端某些嵌套容器（比如 overflow: auto 的 div）里也不生效；甚至触发了 will-change: transform 后反而更卡。
- 只对根元素（
html或body）最稳定，但受限于语义和布局需求，往往不能这么用 - 一旦父容器有
transform、perspective、filter或will-change，就会创建新的层叠上下文，导致fixed失效 - 安卓 WebView 和部分微信内置浏览器会直接忽略该声明，不报错也不执行
不用 fixed 怎么模拟视差滚动效果
靠监听 scroll 事件 + transform: translateY() 动态调整背景位置，这是目前兼容性最好、可控性最强的方案。
使用场景：需要在任意容器内实现视差（比如卡片区域、轮播下方模块），或必须支持 iOS/安卓全量机型。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流滚动监听，避免卡顿 - 背景图设为
background-attachment: scroll（默认值），再用background-position或transform移动它 - 计算位移时建议用视口滚动比例（
window.scrollY / document.body.scrollHeight），而非绝对像素，更适配不同屏幕高度
简短示例：
const parallaxEl = document.querySelector('.parallax-bg');
window.addEventListener('scroll', () => {
const y = window.scrollY * 0.5; // 0.5 是视差系数
parallaxEl.style.backgroundPosition = `center ${y}px`;
});background-position 百分比 vs 像素值的坑
background-position 用百分比时，锚点逻辑容易反直觉：它不是“背景图移动多少”，而是“背景图的哪个点对齐容器的哪个点”。视差滚动里混用会导致偏移错乱。
常见错误现象：滚动时背景图突然跳一下；在不同分辨率下偏移量不一致；放大页面后视差失准。
- 用像素值（如
center 100px）最直观，适合基于scrollY的线性计算 - 用百分比（如
50% 50%）时，50%表示背景图中心对齐容器中心，改scrollY会影响这个对齐关系，需额外换算 - 如果背景图尺寸大于容器，且想保持“图随滚动态居中”，优先用
transform: translateY()控制整个元素，而非改background-position
要不要加 will-change: transform 来优化性能
加了可能更慢，尤其在低端安卓机上。现代浏览器对 transform 的硬件加速已足够智能，盲目加 will-change 反而触发不必要的图层提升和内存占用。
性能影响：开启后，浏览器会提前把该元素单独绘制到一个合成层，但如果元素本身不大、更新不频繁，这一步纯属浪费。
- 仅当视差元素频繁重绘（比如配合
scroll每帧都改transform）且观察到卡顿时，再局部加will-change: transform - 加完必须在滚动停止后清掉（用
setTimeout延迟移除），否则图层常驻吃内存 - 更推荐用
transform: translateZ(0)替代，轻量且兼容性更好
视差滚动真正的复杂点不在怎么写 CSS，而在滚动事件精度、设备像素比适配、以及 touchmove 下的 iOS 滚动阻塞问题——这些没法靠一行 background-attachment 解决。
