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。
立即学习“前端免费学习笔记（深入）”；
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 是命令式逐帧控制，二者底层调度不一致。
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
解决方案很明确：二选一。做平滑滚动驱动的效果，就彻底放弃 transition，全程用 rAF + transform 插值；若只需简单入场动画（如滚动到某区域才淡入），可用 IntersectionObserver 触发 class 切换，再靠 transition 过渡。
- 视差类效果必须用 rAF，不能依赖 transition
- 淡入/缩放等一次性状态切换，用
opacity+transition更轻量 - 别在同一个元素上既设
transition又用 rAF 改同一属性
移动端视差容易失效，关键是 touchmove 不触发 scroll 事件
iOS Safari 和部分安卓 WebView 中，原生滚动容器（如 ）在 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 处理渲染，两层缺一不可。
