background-attachment: fixed 在手机上完全不生效，是因为 iOS Safari 从 iOS 15 起主动禁用该属性以保障滚动性能，即使加 -webkit 前缀或父容器无层叠上下文也无效；安卓 WebView 同样普遍忽略，故需改用 transform + requestAnimationFrame 或 scroll-driven animations 等替代方案。
为什么 background-attachment: fixed 在手机上完全不生效
这不是写法错误，是 iOS Safari 主动禁用该属性——从 iOS 15 开始，background-attachment: fixed 默认被忽略，哪怕加了 -webkit-background-attachment: fixed，只要父容器触发新层叠上下文（比如有 transform、filter 或 will-change），它就直接退化为 scroll。常见现象：桌面端正常，真机一滑背景跟着内容一起滚。
必须同时满足三个条件才可能勉强工作：
- 容器显式设
height: 100vh（min-height不够） - 父级不能有
overflow: hidden、position: sticky或任何会创建新 stacking context 的样式 - 背景图需
background-size: cover+background-position: center，否则偏移错位
但即便全满足，安卓旧 WebView 和部分 UC 浏览器仍不支持。所以生产环境别押宝纯 CSS。
用 transform: translateY 实现多层差速滚动的最小可行写法
核心就两行 JS 计算 + 一行 CSS 声明，不需要框架、不依赖 scroll 事件高频触发：
立即学习“前端免费学习笔记（深入）”；
- 给每层背景元素加
data-speed="0.2"（远层）或data-speed="0.7"（近层），数值越小越“远” - 监听
scroll时只读取window.scrollY，存进变量，不改样式 - 用
requestAnimationFrame统一更新：el.style.transform = `translateY(${ -scrollY * speed }px)`
对应 CSS 必须配齐：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.parallax-layer {
position: relative;
will-change: transform;
}
漏掉 position: relative，transform 可能不生效；漏掉 will-change，Chrome 会降级到 CPU 渲染，首帧撕裂明显。
移动端 touchmove 滚动时 scrollY 不更新怎么办
iOS Safari 和部分安卓 WebView 在 touchmove 过程中不会实时更新 window.scrollY，导致视差层卡死不动。这不是 JS 错，是浏览器行为。
- 必须监听
touchmove并调用event.preventDefault()（仅对视差容器） - 在
touchmove回调里手动计算偏移量：const touchY = event.touches[0].clientY，再映射为虚拟 scrollY - 更稳妥的做法：用
IntersectionObserver触发初始化，避免 DOM 尚未渲染就执行 JS
另外，别在 scroll 监听器里直接调 getBoundingClientRect()——它会强制同步布局，卡顿立竿见影。所有位置计算都应基于 window.scrollY 或缓存值。
Canvas 方案适合什么场景？什么时候该放弃 DOM 分层
当你要控制云层飘动节奏、山峦轮廓锯齿感、或需要无缝循环横向滚动（比如跑马灯式远景），DOM 层叠方案会因图片裁切、缩放失真、重绘开销大而露馅。这时 Canvas 是更干净的选择。
- 所有图层图像必须横向无缝拼接，宽度 ≥ 屏幕宽 × 2
- 每层维护独立
offsetX，更新时做offsetX = (offsetX + speed * delta) % width防止数值溢出 - 绘制时不调
clearRect()，改用fillRect(0, 0, w, h)填底色，减少闪烁
Canvas 的代价是：无法让文字、按钮等前景元素自然叠在上面，得额外用 DOM 层盖在 Canvas 上并手动对齐。所以它不是“更高级”，而是“更可控”——适合对视觉节奏有强要求、且愿意接受额外定位成本的场景。
