用 background-attachment: fixed 可实现轻量滚动视差，兼容性好但 Safari 无效；JS 方案用 requestAnimationFrame + transform 更可控，需防元素未加载、iOS 卡顿及后台失活问题。
用 background-attachment: fixed 实现最简滚动视差
它不是“真视差”，但兼容性好、开销低，适合背景图缓慢位移的场景。核心是让背景图不随容器滚动，而内容层正常滚动，形成相对运动错觉。
- 只对设置了
height（或min-height）的块级元素生效，height: auto下多数浏览器会退化为scroll - 在 Safari（尤其是 iOS）上，
fixed可能被强制忽略，需加-webkit-transform: translateZ(0)触发硬件加速 - 不要在
position: sticky或transform父容器内使用，容易被裁剪或失效 - 示例：
.parallax-bg {<br> background-image: url("scene.jpg");<br> background-attachment: fixed;<br> background-position: center top;<br> background-size: cover;<br> min-height: 100vh;<br>}
纯 CSS 的 transform: translateY() 滚动监听方案
比 fixed 更可控，且能规避 Safari 兼容问题，但需要 JS 驱动——不过逻辑极轻量，无需框架。
- 监听
scroll事件，读取window.scrollY，计算当前元素距视口顶部距离（getBoundingClientRect().top） - 用
element.style.transform = `translateY(${offset}px)`动态偏移，offset通常按滚动比例缩放（如scrollY * 0.5） - 务必用
requestAnimationFrame包裹更新逻辑，否则卡顿明显；避免直接在scroll回调里操作 DOM 样式 - 注意：元素需设
will-change: transform或transform: translateZ(0)提前升层，防止重绘抖动
遇到 Uncaught TypeError: Cannot read property 'top' of null 怎么办
这是 JS 获取元素失败后调用 getBoundingClientRect() 的典型报错，和视差本身无关，但高频出现。
- 常见原因：JS 执行时目标元素尚未渲染（比如放在
里加载，或未等DOMContentLoaded） - 修复方式：确保获取元素前已挂载，用
document.querySelector(".parallax-target")后加判空，或改用document.addEventListener("DOMContentLoaded", ...) - 更稳妥做法：把视差初始化逻辑封装成函数，在
IntersectionObserver触发进入视口时再启动，既防错又省性能
移动端视差卡顿、闪屏、失效的三个硬伤点
不是代码写错了，而是平台限制导致的必然表现，得绕过去。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 对
background-attachment: fixed的支持形同虚设，哪怕加了transform也大概率不动——别挣扎，换 JS 方案 - 滚动期间频繁触发
transform更新，若没用will-change或没升层，iOS 上极易白屏/闪退，尤其配合opacity动画时 - 部分安卓 WebView（如微信内置）禁用
requestAnimationFrame在非活跃标签页的执行，切后台再回来可能视差停摆——需监听visibilitychange重置状态
视差本质是视觉欺骗，越想“真实”越容易掉进设备和渲染管线的坑里。先跑通、再调参、最后才考虑多层深度，顺序反了基本就陷入无限调试。
