下拉刷新指示器不能只靠transform: translateY()，因纯位移无法触发原生下拉刷新且会干扰；必须让容器有真实滚动空间，指示器脱离文档流并实时响应手势。
下拉刷新指示器为什么不能只靠 transform: translateY()？
因为纯位移无法触发浏览器原生下拉刷新（iOS Safari / Chrome Android），反而会干扰它。真正可用的方案必须让容器有真实滚动空间，且指示器要脱离文档流、随手势实时响应——否则松手时动画卡顿、方向错乱、或根本没反馈。
- 用
position: absolute把指示器钉在容器顶部，但父容器得设position: relative且有足够内边距（padding-top）预留显示区域 - 指示器高度不能写死为固定值，得用
height: 0+overflow: hidden配合transform: scaleY()动态撑开，这样缩放才顺滑 - 别用
top: 0定位——松手回弹时容易跳变，改用top: calc(-100% + 1px)这类相对计算更稳
如何用 @keyframes 做“下拉中→松手→加载中→完成”四段动画？
关键不是堆帧数，而是把状态映射到 CSS 自定义属性上，用 JS 控制 --pull-progress 和 --loading 切换阶段，CSS 只负责响应变化。
- 下拉过程：监听
touchmove，把下拉距离转成--pull-progress: [0–1]，指示器用transform: scaleY(calc(var(--pull-progress) * 0.8))拉伸 - 松手瞬间：若
--pull-progress > 0.6，立刻设--loading: 1，触发旋转动画；否则设--pull-progress: 0回弹 - 加载中：用
animation: spin 0.8s linear infinite，但别直接写rotate(360deg)——加transform-origin: center防止偏移 - 完成态：JS 主动设
--loading: 0并重置--pull-progress，CSS 用transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1)回收
overscroll-behavior: contain 必须加在容器上吗？
必须。不加的话，下拉超限时整个页面会跟着动（尤其 iOS），指示器定位失效，甚至触发双重重载。
- 只对下拉容器（比如
<div class="refresh-wrapper">）设 <code>overscroll-behavior: contain，别设在body或html上——那会禁掉所有滚动链式行为 - 安卓 Chrome 需额外加
scroll-behavior: auto防止回弹卡顿 - 如果容器是
position: fixed，得手动监听scroll补位，因为overscroll-behavior对 fixed 元素无效 - 确保容器有
will-change: transform，否则 iOS Safari 下transform动画掉帧严重，指示器“瞬移” - 检查是否意外触发了
-webkit-overflow-scrolling: touch（已废弃），它会让子元素position: absolute脱离父容器参考系 - 真机上
vh单位不可靠（Safari 地址栏显隐影响），指示器尺寸全用px或rem，别混用 - Android WebView 里
transform: scale()可能模糊，加backface-visibility: hidden强制启用 GPU 渲染
移动端真机调试时指示器消失或错位怎么办？
八成是视口缩放或渲染层剥离问题，和 PC 模拟器表现完全不同。
立即学习“前端免费学习笔记（深入）”；
实际最难调的从来不是动画本身，而是不同机型对 touchstart 坐标、滚动阻尼、合成层提升时机的细微差异——这些没法靠 CSS 解决，得靠 JS 精确采样和降噪。
