真视差需JS监听scroll+requestAnimationFrame节流，用getBoundingClientRect计算元素视口位置，再以transform:translateY动态控制各层位移强度，禁用top/margin避免重排。
用 scroll 事件 + transform: translateY() 模拟视差，不是真“视差”
苹果官网那种丝滑滚动动画，本质是监听滚动位置，动态调整元素位移。它不依赖 CSS perspective 或 will-change，而是靠 JS 精确控制每个区块的 transform 偏移量。浏览器原生不支持“滚动触发视差”，所以必须手写逻辑。
常见错误现象：transform: translateZ() 搭配 perspective 被误认为能实现视差——它只影响 3D 变换层级，不随滚动变化；纯 CSS @keyframes 无法绑定滚动进度，只能做固定时长动画。
- 使用场景：首页大图区、产品介绍模块、分屏过渡段落
- 性能关键点：必须用
requestAnimationFrame节流scroll回调，否则卡顿明显 - 兼容性注意：iOS Safari 对
transform的渲染更敏感，避免同时操作top和transform
getBoundingClientRect().top 是计算滚动偏移的核心依据
判断一个元素是否进入/离开视口，不能只看 window.scrollY，得结合元素自身位置。最稳定的方式是每次滚动时读取目标元素的 getBoundingClientRect().top，它返回的是该元素上边缘距离视口顶部的距离（负值表示已滚过，正值表示还没到）。
容易踩的坑：offsetTop 会受父级 position 影响，且不响应滚动；scrollTop 在不同容器里含义混乱，全页滚动应统一用 window.scrollY 配合 getBoundingClientRect。
- 参数差异：
getBoundingClientRect()返回值单位是像素，且是只读对象，需每次调用获取最新值 - 推荐写法：
const progress = 1 - (elRect.top / window.innerHeight)，得到 0～2 范围的“可视进度” - 别在
scroll里直接改style.left——强制重排，一律走transform
用 transform: translateY() 控制视差强度，别碰 margin 或 top
视差感来自不同层以不同速度移动。比如背景图慢速上移，前景文字快速上移。所有位移都必须用 transform: translateY() 实现，这是唯一被 GPU 加速、不影响布局、且可被浏览器优化的方案。
错误示范：margin-top: -50px 或 top: -50px 会触发 layout → paint → composite 全流程，滚动时掉帧严重。
- 强度控制：背景层用
translateY(progress * -20px)，内容层用translateY(progress * -80px) - 不要用百分比单位：
translateY(-20%)在滚动中表现不稳定，始终用 px - iOS 上若出现闪烁，加
transform: translateZ(0)强制硬件加速（但别滥用）
防抖和节流不是可选项，是滚动动画的生死线
没加节流的 scroll 监听，在 Chrome 滚动一次可能触发 60+ 次回调；Safari 更狠。不做处理，JS 主线程直接卡死，动画变成幻灯片。
真实项目里，90% 的“视差卡顿”问题都出在这儿，而不是算法或 CSS 写错了。
- 必须用
requestAnimationFrame包裹更新逻辑，不是setTimeout或 Lodashdebounce - 示例结构：
let ticking = false;<br>function updateParallax() {<br> // 更新所有元素 transform<br> ticking = false;<br>}<br>window.addEventListener('scroll', () => {<br> if (!ticking) {<br> requestAnimationFrame(updateParallax);<br> ticking = true;<br> }<br>}); - 别在
updateParallax里查 DOM——提前缓存document.querySelectorAll('.parallax-layer')
苹果官网的视差效果看似复杂，其实核心就三件事：用 getBoundingClientRect 算位置、用 transform: translateY 做位移、用 requestAnimationFrame 控节奏。最容易被忽略的是第三点——很多人写了前两步，一上线就卡，然后回头去调 CSS 层叠顺序或 z-index，结果白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
