纯css变量无法独立实现视差滚动，必须由js注入--scroll-y等变量，再通过calc()配合transform实现；background-attachment:fixed在现代浏览器中受限严重，js驱动方案最兼容。
纯 CSS 变量无法独立实现视差滚动背景——因为 --scroll-y 这类变量必须由 JavaScript 注入，CSS 本身拿不到滚动位置。所谓“CSS 变量实现视差”，本质是 JS + CSS 变量 + calc() 的协作方案，不是纯声明式写法。
为什么 background-attachment: fixed 不行了
它在桌面 Chrome/Firefox 偶尔能用，但现代浏览器已普遍限制其行为：background-attachment: fixed 在以下情况会静默降级为 scroll：
- 父容器有
transform、filter或will-change（哪怕只是transform: translateZ(0)） - 背景设在非根元素（比如某个
.section内部） - 移动端 Safari（iOS 15+）直接忽略该属性，加
translateZ(0)也无效 - Chrome v99+ 要求背景必须设在
body或html上才可能触发
用 JS 注入 CSS 变量驱动 transform
这是目前最可控、跨平台兼容性最好的方案，核心是把滚动值转成自定义属性，再用 calc() 算位移：
- 监听
window.scrollY或document.documentElement.scrollTop，别只用window.scrollY，IE/旧 Safari 需 fallback - 在
requestAnimationFrame回调里更新变量：el.style.setProperty('--scroll-y', scrollY + 'px') - CSS 中写：
transform: translateY(calc(var(--scroll-y) * var(--parallax-factor))) -
--parallax-factor推荐设为小数（如0.3），负值可反向；避免除法（/），防止 NaN - 必须给该元素加
transform: translateZ(0)（或已有其他 transform），否则不升图层，动画仍重绘
容易被忽略的性能陷阱
视差卡顿很少是因为图片大，而是因为频繁触发 layout/paint：
- 没节流的
scroll事件会每毫秒触发多次，直接更新样式 = 主线程雪崩 -
will-change: transform别乱加——它提前分配 GPU 内存，初始渲染反而更慢；translateZ(0)更轻量 - 多个视差元素共用同一个
--scroll-y变量没问题，但每个都要单独声明transform: translateZ(0)（除非已有 transform） - 如果视差层里有文字或按钮，记得加
pointer-events: none（背景层）和显式z-index（内容层），否则交互会被遮挡
真正麻烦的从来不是怎么写那几行 CSS，而是滚动事件的调度时机、图层提升的触发条件、以及移动端 Safari 对 fixed 背景的彻底放弃——这些细节不处理，视差效果在真机上大概率直接消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
