纯 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 滚动的同步处理。