position: fixed 在视差滚动中常失效，因其锚定视口、脱离文档流，不响应父容器的 transform 或 scroll 变化，导致背景层卡死；应改用 absolute + transform 或 requestAnimationFrame + getBoundingClientRect 动态计算。
为什么 position: fixed 在视差滚动中常失效
因为视差滚动本质依赖元素在滚动容器内的相对位移，而 position: fixed 会让元素脱离文档流、锚定视口，导致它不再响应父容器的 transform 或 scroll 变化。常见表现是背景层“卡死不动”，和前景内容完全脱节。
真正可用的定位方式是 position: absolute 配合 transform: translateY() 动态计算，或直接用 background-attachment: fixed（仅适用于背景图，且在 iOS Safari 中有兼容性问题）。
- 若使用
transform实现视差，父容器需设overflow-y: scroll且有明确高度，否则无法触发滚动事件监听 -
position: sticky不适合视差，它只在滚动到临界点时切换定位，无法实现连续位移 - 避免对
body直接监听scroll，iOS Safari 下可能不触发；推荐监听具有overflow: auto/scroll的容器元素
用 requestAnimationFrame + getBoundingClientRect() 计算视差偏移
这是最稳定、兼容性好、且不依赖第三方库的方案：不靠 scroll 事件频繁触发，而是每帧读取元素与视口的相对位置，再按比例缩放位移值。
const parallaxEl = document.querySelector('.parallax-layer');
function updateParallax() {
const rect = parallaxEl.getBoundingClientRect();
const scrollTop = window.pageYOffset;
const speed = 0.3; // 视差强度，0～1 之间
const yPos = -(rect.top + scrollTop) * speed;
parallaxEl.style.transform = `translateY(${yPos}px)`;
}
window.addEventListener('scroll', () => {
requestAnimationFrame(updateParallax);
});-
getBoundingClientRect().top是元素上边缘距视口顶部的距离，为负值表示已滚出视口上方 - 用
requestAnimationFrame替代直接在scroll里更新样式，避免丢帧和抖动 - 若元素不在首屏初始加载，需在
updateParallax开头加if (!parallaxEl.offsetParent) return;防止报错
background-attachment: fixed 的坑与绕过方案
看似最简，但实际在移动端（尤其是 iOS Safari）经常失效——它会退化为 scroll 行为，导致视差消失。根本原因是 Safari 对 fixed 背景在非 body 元素上的渲染限制。
立即学习“前端免费学习笔记（深入）”；
- 必须确保该元素有
height（不能靠内容撑开），否则视差不生效 - 不能和
transform、opacity等触发合成层的属性共存，否则 Safari 强制关闭fixed行为 - 替代做法：改用
background-attachment: scroll+ JS 动态更新background-position-y，并设will-change: background-position提升性能
多层视差叠加时的 z-index 与 transform 隔离
当多个 position: absolute 层叠时，若父容器用了 transform（比如 scale 或 rotate），会创建新的层叠上下文，导致 z-index 失效或层级错乱。
- 所有视差层应挂载在同一无
transform的祖先节点下，避免嵌套变换 - 用
isolation: isolate显式创建独立层叠上下文，比依赖transform更可控 - 若某层需动画，优先用
transform: translateZ(0)触发硬件加速，而非z-index驱动堆叠顺序
CSS 视差滚动不是“设个 fixed 就完事”的效果，它的稳定性取决于你是否绕开了移动端渲染限制、是否规避了层叠上下文污染、以及是否用对了帧同步机制。最易被忽略的是：iOS 上任何涉及 background-attachment: fixed 的方案，在页面存在 transform 或 will-change 时，大概率静默降级。
