background-attachment: fixed 无法调节视差速度，因其仅锁定背景导致固定差速1:0且强制重绘；需用JS监听滚动并注入--scroll-y变量，结合calc()乘法计算位移、translateZ(0)升层及适配局部滚动容器。
为什么不能直接用 background-attachment: fixed 控制速度系数
它根本没提供任何“速度调节”接口——fixed 只是让背景锁死在视口，滚动时背景不动，内容动，差速固定为 1:0。想调成 0.3 倍速或反向 -0.5 倍速？做不到。而且它强制每帧 repaint，中低端机一卡一卡的。
--scroll-y 必须由 JS 注入，纯 CSS 拿不到滚动值
CSS 本身没有访问 window.scrollY 的能力，所以得靠 JS 把实时滚动偏移写进自定义变量：
const updateScrollVar = () => {
const y = window.scrollY || document.documentElement.scrollTop;
document.documentElement.style.setProperty('--scroll-y', y + 'px');
};
window.addEventListener('scroll', updateScrollVar);
updateScrollVar(); // 初始化一次- 必须监听
scroll事件，不能只靠resize或load - 要兼容 IE/Edge，得同时读
window.scrollY和document.documentElement.scrollTop - 建议加
requestAnimationFrame节流，避免高频触发：把updateScrollVar包进raf回调里
用 calc(var(--scroll-y) * var(--parallax-factor)) 算位移
关键在乘法而非除法——calc(var(--scroll-y) / var(--parallax-factor)) 容易因 --parallax-factor 为 0 或空值导致 NaN，整个 transform 失效：
.parallax-bg {
--parallax-factor: 0.2;
transform: translateY(calc(var(--scroll-y) * var(--parallax-factor)));
}-
--parallax-factor推荐设为小数（0.1～0.8），负值可反向（如-0.3） - 别用
px单位写死系数，否则响应式切换时没法动态改 - 若需多层不同速度，给每个元素单独设
style="--parallax-factor: 0.4"，不要共用 class 覆盖
图层提升不加 will-change: transform 或 translateZ(0) 就白搭
就算用了 transform: translateY()，浏览器仍可能把它和普通文本合在同一个图层渲染，滚动时照样重绘。必须显式升层：
立即学习“前端免费学习笔记（深入）”；
.parallax-bg {
transform: translateZ(0) translateY(calc(var(--scroll-y) * var(--parallax-factor)));
}-
translateZ(0)比will-change: transform更轻量，不会引发过度优化 - 别对太多元素同时加，否则 GPU 内存占用飙升，尤其在 iOS Safari 上容易崩溃
- 移动端务必测试真机，
translateZ(0)在部分 Android WebView 里反而更卡，可降级为backface-visibility: hidden
实际跑起来最常被忽略的一点：滚动容器不是 body 时，window.scrollY 就失效了。比如用 overflow-y: scroll 的局部容器，就得监听那个容器的 scrollTop，再手动注入到对应子元素的 style 上——变量作用域和滚动源必须严格对齐，错一个就全不动。
