异步加载导致的滚动位置跳动与锚定
别名: 滚动锚定 · layout shift · asynchronous loading
概念解释
滚动锚定（scroll anchoring）是在图片、广告、折叠内容或异步数据插入导致页面高度变化时，尽量保持用户正在看的内容处于相同视觉位置的机制。没有锚定，新增内容会把阅读位置推走，造成突然跳动、误点和重新寻找。
机制
系统选择视口内稳定的锚点元素，布局在其上方变化后补偿滚动偏移，使锚点仍留在原屏幕位置。锚点选择、内容高度预留、动画和用户主动滚动共同影响补偿；若补偿落后于渲染或反复换锚，视觉仍会抖动。
锚点选择本身是这个机制最容易失效的环节：多数实现选取视口内"离顶部最近、且自身没有变化"的元素作为锚点，一旦这个元素恰好也在变化（比如它下方紧跟着一张正在加载的图片，两者被布局引擎合并进同一次重排），补偿计算就会用错基准，产生比不锚定更诡异的跳动——用户会看到内容先跳一下、再被"纠正"回来，比单纯的一次性跳变更容易引发误点。这就是为什么锚定不是"打个补丁"就能解决布局变化，而必须和内容预留尺寸的策略配合：锚定处理的是"变化发生后如何补偿"，预留尺寸处理的是"从源头减少变化"，两者缺一不可。
怎么研究
在阅读、表单填写和列表浏览中注入延迟图片、推荐模块和展开内容，测量视口位移、重新定位时间、误点击和放弃。应测试用户主动滚动、停留阅读及底部加载，因不同意图对"保持位置"的要求不同。若要定位锚点选择算法本身的失效场景，需要专门构造"锚点元素自身也在变化"的边界条件，常规内容注入实验很少覆盖这种复合情况。
边界
锚定不应阻止用户主动跳到新内容，例如聊天中新消息提示、提交后定位错误或明确点击锚点链接。对动态高度极不稳定的区域，预留空间、骨架屏或显式"有新内容"提示可能比频繁补偿更可预测——尤其是当内容变化频率高到锚点持续切换时，反复补偿本身就会成为新的干扰源，不如放弃锚定改用固定占位。
怎么落地
- 为图片、广告和异步模块预留尺寸，先减少布局变化再依赖锚定补偿；预留尺寸和锚定是互补关系，不能只做一个。
- 在阅读区保持当前内容稳定；对新内容用提示和用户控制而非强制抢位。
- 验证办法：以慢网、延迟资源和内容展开测试视口位移，记录用户是否需要重新寻找阅读点；专门测试锚点元素自身发生变化时是否出现"跳动后又纠正"的二次抖动。