scroll-timeline 在移动端基本不可用，因 ios safari、微信等 webkit webview 完全不支持，chrome for android 虽支持但需严格满足滚动容器显式声明、无 transform 截断、动态内容不触发重算等苛刻条件。
不能直接用 scroll-timeline 实现可靠的移动端视差滚动——iOS Safari、微信 WebView、大部分安卓 WebView 均不支持，且即使在 Chrome for Android 上启用，也常因 overflow: hidden、transform 层叠上下文或滚动容器未显式声明而静默失效。
为什么 scroll-timeline 在移动端基本不可用
这不是写法问题，而是平台级缺失：
- iOS Safari 和所有基于 WebKit 的 WebView（包括微信、QQ、钉钉）对
@scroll-timeline和animation-timeline: scroll()返回false，连CSS.supports('animation-timeline', 'scroll()')都不通过 - Android Chrome 115+ 虽支持，但要求滚动容器必须是「真实可滚动块级元素」：不能是
body或html，且需同时满足overflow-y: scroll+height+ 内容溢出；多数移动端布局用min-height: 100vh+flex，天然不触发 - 只要父级用了
transform、will-change、opacity或position: sticky，滚动上下文就会被截断，scroll-timeline直接不绑定，控制台无任何提示 - 响应式场景下用
start: 0%/end: 100%极易偏移——动态加载内容、字体加载重排、软键盘弹出会改变scrollHeight，但 timeline 不重计算
animation-timeline: scroll() 在 Chrome for Android 上的硬性前提
哪怕只求在 Chrome for Android 里跑通，也必须满足以下全部条件：
- 滚动源容器必须是明确的 DOM 元素，例如
<div id="scroller">...</div>，且样式中显式设置：overflow-y: scroll、height: 100vh（不能用min-height）、scrollbar-width: none（可选，但避免布局抖动） -
animation-timeline必须指向命名 timeline，不能直接写scroll(root)；@scroll-timeline规则里source必须用selector(#scroller)，orientation: vertical不可省略 -
animation-duration必须设值（如1s），否则 Chrome 会静默回退为时间驱动动画 - 背景图层必须用
background-position驱动（transform不被支持），且background-attachment必须为scroll（不是fixed） - 多层视差需复用同一 timeline，靠
animation-range: entry 0% entry 100%分段，但每层的@keyframes中位移值必须手动写死（如background-position: center 0px → center -200px），无法用 CSS 变量动态缩放
真正能落地的移动端视差方案：轻量 JS + CSS 变量
放弃“纯 CSS”执念，用不到 20 行 JS 换来全平台稳定、可调速、可响应：
- 监听
scroll事件前，先用requestAnimationFrame节流，避免卡顿；不要直接绑window.onscroll - 目标元素必须显式设
background-attachment: scroll，否则 iOS 会强制降级为普通滚动 - 位移比例建议用
0.2～0.6区间，例如：element.style.backgroundPosition = `center ${window.scrollY * 0.4}px` - 若页面有多个视差区块，每个都应独立计算偏移，不能共用同一
scrollY值直接套用；可用getBoundingClientRect()获取相对视口位置做微调 - 配合
will-change: background-position提前提示合成器，提升帧率
最易被忽略的一点：移动端视差效果是否生效，和「滚动容器是谁」强相关。不是你写了 scroll-timeline 就自动绑定到页面滚动，而是浏览器只认它能找到的、有明确滚动行为的祖先节点——这个节点在移动端往往根本不存在，或者被各种 CSS 层叠规则悄悄屏蔽了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
