background-position 比 background-attachment: fixed 更可靠，因后者在 iOS Safari 和多数安卓 WebView 中被浏览器主动禁用，而前者是全平台支持的纯 CSS 属性，可精准线性映射滚动位移，适配各类滚动输入源。
background-position 为什么比 background-attachment: fixed 更可靠
因为 background-attachment: fixed 在 iOS Safari 和多数安卓 WebView 中已被主动禁用，不是你写错了，是浏览器直接忽略该声明。而 background-position 是纯 CSS 布局属性，不依赖合成层冻结机制，所有现代浏览器都支持它动态计算和渲染。
它天然适配移动端触控滚动、惯性滑动、键盘方向键等任意滚动输入源，位移与滚动距离可严格线性映射——这才是“平滑视差”的底层前提。
用 scroll 事件 + background-position 实现视差的实操要点
核心逻辑：监听 window.scrollY，按比例缩放后赋值给 background-position 的 Y 轴（如 center ${y}px），让背景图移动得比内容慢。
- 必须显式设置
background-attachment: scroll（即使它是默认值），避免继承或重置干扰 - 用
requestAnimationFrame包裹 scroll 回调，防止高频触发导致卡顿 - 视差系数建议取
0.2～0.6，例如window.scrollY * 0.4；太大易露白，太小无感 - 背景图尺寸至少为容器宽高的 1.5 倍，推荐
background-size: cover或固定像素值 - 不要用百分比写法（如
50% 50%），它基于对齐锚点，滚动中会因重排跳变；优先用center 100px这类像素值
scroll-timeline 驱动 background-position 的现代写法
Chrome 115+、Safari 17.4+ 支持原生滚动驱动动画，无需 JS，性能更好，且能响应滚速变化——这是目前唯一真正“平滑”的方案。
立即学习“前端免费学习笔记（深入）”；
关键约束很具体：
- 动画只能使用
background-position，不能混用transform或其他属性 - 必须配合
@scroll-timeline规则定义时间轴，仅写animation-timeline: scroll(root)不生效 - 容器需有明确滚动上下文，比如
body或设置了overflow-y: scroll的父元素 - 检测支持性：
CSS.supports('animation-timeline', 'scroll()')，不支持时 fallback 到 JS 方案
容易被忽略的兼容性陷阱
很多人以为只要加了 will-change: background-position 就能 GPU 加速，但实际只在动画触发前设置才有效；滚动中频繁设它反而拖慢性能。
更隐蔽的问题是：当父容器存在 transform、perspective、filter 或 overflow: hidden 时，background-position 的计算参考系可能被截断，导致偏移量失准——这种情况下，改用 transform: translateY() 控制整个背景容器更稳妥。
真正在生产环境交付时，别只测“能不能动”，要验证不同屏幕高度、缩放级别、滚动速度下的位移一致性——视差的本质是比例关系，不是绝对像素。
