上拉加载骨架屏须用单层渐变+内联样式实现动态光效：background-size固定像素、background-position设负值起始、插入时立即触发scrollintoview，并预留渲染时机避免视觉断裂。
移动端上拉加载更多场景下的骨架屏，不能复用列表顶部的静态占位方案——它必须随滚动动态追加、不触发重排、且光效方向与用户操作意图一致（从上往下扫）。核心是用 background-position 驱动单层横向渐变，而非多层叠加或 transform 动画。
为什么上拉加载骨架屏不能用两层 linear-gradient 叠加
列表底部新增的骨架项通常由 JS 动态插入（如 appendChild 或虚拟滚动 append），若每个项都声明两层渐变（结构 + 扫光），会因 background-size 单位限制（iOS Safari 不认 rem/vw）和 position 同步问题导致光条错位、跳帧。更关键的是：上拉加载的骨架是“临时占位”，生命周期短，没必要为每项维护两套渐变参数。
- 单层
linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)足够表达“内容正在浮现”的节奏感 - 必须设
background-size: 300px 100%（固定像素，不能是200%或100vw），否则 iOS 上动画直接失效 -
background-repeat: no-repeat是底线，否则新插入的骨架项会因重复背景出现多条光效
如何让新插入的骨架项自动带流动光效
不能依赖全局 class 绑定动画（比如 .skeleton-item { animation: shine 1.8s infinite; }），因为 JS 插入节点后，浏览器可能尚未完成样式计算，导致首帧无动画或卡在中间帧。正确做法是插入时直接内联关键样式：
- 插入 DOM 前，给元素设
style.cssText = "background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 300px 100%; background-position: -300px 0; animation: shine 1.8s infinite linear;" - 对应的
@keyframes shine必须写成from { background-position: -300px 0; } to { background-position: 300px 0; }（单位不能省） - 避免用
animation-delay错开节奏——上拉加载是线性追加，光效同步反而更符合“一批数据正在来”的直觉
滚动中插入骨架项时的常见视觉断裂
用户上拉瞬间看到空白再弹出骨架，或骨架刚出现就闪一下再动，本质是渲染时机没对齐。这不是 CSS 问题，而是 JS 插入节点的时机太晚：
- 监听
scroll事件时，别等scrollTop + clientHeight >= scrollHeight - 50才触发加载，应提前到-150（预留骨架渲染时间） - 插入骨架项后，立即调用
el.scrollIntoView({ block: 'nearest' })强制触发合成层更新，避免光效延迟一帧 - 所有骨架容器必须有明确
height或min-height，不能靠内容撑开；否则插入瞬间高度突变，引发页面抖动
最易被忽略的是：上拉加载骨架的 background-position 动画起始值必须是负像素（如 -300px），不是百分比。百分比在动态插入场景下会因父容器宽度未稳定而计算错误，导致光条从中间炸开——这在低端安卓机上尤为明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
