CSS transition无法响应滚动事件，必须用JavaScript监听scroll并动态修改transform或opacity等可动画属性，配合requestAnimationFrame节流和will-change优化，视差效果需按speed比例计算位移，禁用transition与rAF混用。
transition 无法直接响应滚动事件，必须配合 JavaScript 监听 scroll
CSS transition 只对属性值变化生效，而滚动本身不改变任何 CSS 属性——它只是触发 scroll 事件。想让元素随滚动“动起来”，得靠 JS 读取 window.scrollY 或 element.getBoundingClientRect()，再动态设置内联样式或 CSS 自定义属性。
常见错误是只写 transition: transform 0.3s ease; 却没在 JS 中真正修改 transform，结果什么也不动。
- 过渡目标属性必须可动画：优先用
transform和opacity，避免触发布局重排（如top、width） - 为防卡顿，给元素加
will-change: transform;（仅在必要时，别滥用） - 滚动监听要用
requestAnimationFrame节流，否则高频触发导致掉帧
视差滚动的本质是不同层以不同速率位移
所谓“视差”，就是背景层移动慢、前景层移动快，制造景深感。它不是 CSS 原生功能，而是靠 JS 计算每个层的位移比例后，分别设置 transform: translateY() 实现的。
关键参数是 speed（通常 0～1 之间），比如背景层设 speed = 0.2，意味着滚动 100px 时它只移动 20px。
立即学习“前端免费学习笔记（深入）”；
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
const layers = document.querySelectorAll('.parallax-layer');
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
layers.forEach(layer => {
const speed = parseFloat(layer.dataset.speed) || 0.5;
layer.style.transform = `translateY(${scrollY * (1 - speed)}px)`;
});
}, { passive: true });-
data-speed="0.3"表示该层移动速度为视口滚动的 30% - 务必加
{ passive: true }，避免 iOS 上滚动卡顿 - 如果用
background-position做背景视差，注意它默认不支持transition动画，仍需 JS 驱动
transition 与 requestAnimationFrame 冲突时，动画会跳变
当同时使用 CSS transition 和 JS requestAnimationFrame 修改同一属性（如 transform），浏览器可能丢弃中间帧，导致视觉跳跃。这是因为 transition 是声明式动画，而 rAF 是命令式逐帧控制，二者底层调度不一致。
解决方案很明确：二选一。做平滑滚动驱动的效果，就彻底放弃 transition，全程用 rAF + transform 插值；若只需简单入场动画（如滚动到某区域才淡入），可用 IntersectionObserver 触发 class 切换，再靠 transition 过渡。
- 视差类效果必须用 rAF，不能依赖 transition
- 淡入/缩放等一次性状态切换，用
opacity+transition更轻量 - 别在同一个元素上既设
transition又用 rAF 改同一属性
移动端视差容易失效，关键是 touchmove 不触发 scroll 事件
iOS Safari 和部分安卓 WebView 中，原生滚动容器（如 <body>）在 touch 操作时可能不持续触发 scroll，尤其启用 -webkit-overflow-scrolling: touch 时。结果就是手指划动时视差停顿，松手后才追帧。
根本解法是把滚动容器限定在某个 div 内（overflow-y: scroll），并监听其 scroll 事件；或者改用 IntersectionObserver + getBoundingClientRect 做位置判断，绕过 scroll 事件依赖。
- 避免监听
window的 scroll，在 iOS 上不稳定 - 用
element.scrollTop替代window.scrollY更可控 - 测试务必真机，模拟器常掩盖 touch 滚动问题
实际项目里最易忽略的，是把视差当成纯 CSS 技巧去查文档，结果卡在“为什么加了 transition 就不动”。它本质是 JS 控制节奏 + CSS 处理渲染，两层缺一不可。
