纯 CSS 视差滚动（如 background-attachment: fixed）已不推荐——触发强制重绘、破坏合成层隔离，且在 iOS Safari 等环境中失效；应改用 transform + scroll 事件或 IntersectionObserver 驱动，并配合 will-change: transform 和 prefers-reduced-motion 兜底。
视差滚动在现代 CSS 中是否还值得用
纯 CSS 实现的视差滚动（如 background-attachment: fixed）在多数场景下已不推荐——它会触发强制重绘、破坏合成层隔离，且在 iOS Safari 和部分安卓 WebView 中完全失效或表现异常。真正可控、可预测的方案是用 transform: translateY() + scroll() 事件或 IntersectionObserver 驱动，配合 will-change: transform 提前声明提升图层。
用 transform + requestAnimationFrame 做轻量级视差
避免在 scroll 事件里直接修改 top 或 margin，这会导致频繁回流。应把位移逻辑收敛到 requestAnimationFrame 回调中，并只更新 transform：
let scrollY = 0;
window.addEventListener('scroll', () => {
scrollY = window.scrollY;
});
function updateParallax() {
document.querySelectorAll('[data-parallax]').forEach(el => {
const speed = parseFloat(el.dataset.parallax) || 0.5;
const offset = -scrollY * speed;
el.style.transform = `translateY(${offset}px)`;
});
requestAnimationFrame(updateParallax);
}
updateParallax();-
data-parallax="0.3"表示元素滚动速度为视口的 30%，值越小越“慢”，负值可反向 - 务必给视差元素加
will-change: transform，否则某些设备上会出现闪烁或卡顿 - 移动端需监听
touchmove并阻止默认行为，否则视差滞后明显
响应式下视差元素错位怎么办
错位本质是视差计算未适配 viewport 尺寸变化。不能只依赖 window.scrollY，还需监听 resize 并重置缓存的容器高度、基准偏移等：
- 所有参与视差的容器需设
height: 100vh或明确高度，避免因字体缩放、zoom 导致布局塌陷 - 在
resize后重新计算每个data-parallax元素的“可视区域起始位置”（getBoundingClientRect().top），而非仅靠scrollY - 使用
@media (prefers-reduced-motion: reduce)关闭动画：@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; transition: none; } }
为什么 background-attachment: fixed 在 iOS 上失效
iOS WebKit 从 Safari 15.4 起彻底禁用了该属性在非根元素上的作用，即使加了 -webkit-transform: translateZ(0) 也无效。根本原因是其渲染管线将 fixed 背景视为“非合成友好”，且无法与 WKWebView 的滚动优化共存。
立即学习“前端免费学习笔记（深入）”；
- 若必须兼容旧项目，可用 JS 模拟：监听
scroll，动态设置background-position的 Y 值 - 但注意：
background-position是 layout 触发属性，性能远不如transform，仅限静态背景图且无交互的场景 - 更稳妥的替代是用 SVG 作为背景，通过
viewBox和transform控制缩放/位移，天然支持响应式
视差效果越精细，对滚动事件节流、图层合成和媒体查询覆盖的要求越高；最容易被忽略的是 prefers-reduced-motion 的兜底和移动端 touch 滚动的同步处理。
