纯css变量无法读取滚动位置，--scroll-y必须由js注入；background-attachment:fixed不支持调速且兼容性差；最可靠方案是js监听scrolly并更新--scroll-y，css用background-position或transform配合calc实现视差。
纯 CSS 变量无法自己读取滚动位置，--scroll-y 必须由 JavaScript 注入，否则 calc(var(--scroll-y) * 0.3) 中的 --scroll-y 始终是未定义值，视差位移为 0 或 NaN。
为什么 background-attachment: fixed 不适合调速
它根本没提供速度系数接口——background-attachment: fixed 的行为是硬编码的：背景锁死在视口，内容滚动时背景完全不动，差速恒为 1:0。想设成 0.4 倍速、反向 -0.7 倍速，或随滚动加速度动态变化？做不到。更关键的是，现代浏览器已普遍限制它：iOS Safari 直接忽略；Chrome v99+ 要求必须设在 body 或 html 上才可能生效；只要父元素有 transform、filter 或 will-change，就会静默降级为 scroll。
用 JS 注入 --scroll-y 并驱动 background-position
这是目前最可靠、全平台兼容的方案，核心是把滚动偏移映射为像素值，再用 background-position 线性控制背景位移：
- 监听
window.scrollY或document.documentElement.scrollTop（后者兼容 IE/旧 Safari） - 用
requestAnimationFrame包裹更新逻辑，避免高频触发导致卡顿 - 在回调中执行：
el.style.setProperty('--scroll-y', scrollY + 'px') - CSS 中写：
background-position: center calc(var(--scroll-y) * 0.4)（系数推荐 0.2～0.6） - 必须显式声明
background-attachment: scroll，防止继承干扰 - 背景图尺寸至少为容器宽高的 1.5 倍，
background-size: cover更稳妥
用 transform 替代 background-position 的注意事项
当需要更高精度控制（比如多层、反向、叠加动画）时，改用 transform: translateY(calc(var(--scroll-y) * var(--parallax-factor))) 更灵活，但必须处理几个硬性条件：
- 目标元素需有合成层，否则位移仍会触发重绘——加
transform: translateZ(0)或已有其他transform即可 -
--parallax-factor推荐用小数（如0.3），负值可反向；避免在calc()中用除法（如/ 2），易因初始值未定义产出NaN - 若视差层含文字或按钮，必须加
pointer-events: none，否则交互被遮挡 - 多个元素共用同一个
--scroll-y没问题，但每个都要单独触发升层（translateZ(0)）
真正卡住人的从来不是那几行 calc()，而是滚动事件的调度时机、合成层是否真正触发、以及移动端 Safari 对 fixed 的彻底放弃——这些细节不验证，视差效果上线后大概率在真机上直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
