safari 不支持 background-attachment: fixed，应降级为 js 视差方案；需用 requestanimationframe + will-change + intersectionobserver 优化性能，并通过 data-speed 控制多层移动速度。
background-attachment: fixed 在 Safari 上不动怎么办
这不是你代码写错了，而是 iOS Safari（包括 macOS Safari 15 及更早版本）直接忽略 background-attachment: fixed，哪怕加了 transform: translateZ(0) 也大概率无效——这是浏览器策略，不是 bug。
常见误操作是堆砌 hack：-webkit-transform: translateZ(0)、will-change: transform、甚至套两层 position: relative，结果还是静止。真有效的方式只有一种：降级为 JS 方案，别在 Safari 上硬扛 CSS 固定背景。
- 用
@supports (background-attachment: fixed)区分支持环境，Safari 内直接跳过该样式 - 移动端建议统一用 JS 方案，避免条件判断和 fallback 分支维护成本
- 若必须用 CSS，至少加
min-height: 100vh+background-size: cover，否则在 Chrome/Firefox 中也会退化为scroll
用 requestAnimationFrame 驱动 translateY 视差的必要步骤
直接在 scroll 事件里改 element.style.transform 会卡顿、掉帧，尤其 iOS 上容易闪屏或白屏。核心不是“要不要 JS”，而是“怎么让 JS 不拖慢滚动”。
关键动作必须做全：
- 用
requestAnimationFrame包裹 transform 更新逻辑，而不是监听scroll后立刻执行 - 提前给元素加
will-change: transform或transform: translateZ(0)，触发 GPU 层提升，防重绘抖动 - 读取
getBoundingClientRect().top前，先判空：if (!el) return，否则报Cannot read property 'top' of null - 滚动距离缩放系数建议用小数（如
scrollY * 0.3），别用整数倍，否则背景移速超过内容，失去视差感
data-speed 属性控制多层视差的实际写法
想让背景层慢、装饰层快、文字层居中？靠硬编码多个 querySelector 太脆弱。用 data-speed 是轻量解法，但要注意属性值类型和计算时机。
示例结构与 JS 片段：
<div class="parallax-layer" data-speed="0.2"></div> <div class="parallax-layer" data-speed="-0.1"></div>
对应 JS 中应这样读取和使用：
-
const speed = parseFloat(el.getAttribute('data-speed')) || 0—— 必须转数字，否则字符串相乘得 NaN - 负值表示反向移动，适合飘浮粒子或云层效果
- 所有层共用同一个
requestAnimationFrame回调，避免多个定时器互相干扰 - 不要在循环里反复调用
getBoundingClientRect()，缓存一次滚动值复用
IntersectionObserver 启动视差的真正价值
很多人把 IntersectionObserver 当成“可选优化”，其实它是解决两个硬问题的钥匙：元素未加载就执行视差、非视口区域白跑计算。
典型错误是把初始化写在 DOMContentLoaded 里，但 Elementor 或 React 渲染的区块可能还没挂载；或者页面很长，上百个视差元素全程监听 scroll，CPU 持续高负载。
- 用
new IntersectionObserver监听目标元素进入视口，再启动其视差逻辑，既防报错又省资源 - 设置
{ threshold: 0.1 }，元素 10% 进入就触发，比0更早响应 - observer 实例可复用，不必每个元素新建一个
- 离开视口时调用
observer.unobserve(el)，彻底释放监听，防止内存泄漏
实际项目里最易被忽略的，是视差元素的初始状态 —— 比如页面加载完成时滚动条已在中部，但 JS 还没运行，用户第一眼看到的是“错位”的背景。这个时间差无法靠延迟解决，只能靠服务端渲染初始偏移，或客户端首次 update 强制同步一次 transform。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
