向上加载历史消息，怎样保持阅读位置不跳动

关联项目：企业沟通与售后协作平台。项目包含历史消息与消息定位交互；下面进一步分析保持阅读位置的通用方案，不把方案描述为该项目已完整采用。

要保留的是正在读的消息

用户向上翻到一条旧消息，顶部加载更多记录后，原来的内容突然被推到屏幕外。即使数据没有丢失，这次分页也打断了阅读。

需要守住的状态不是某个固定 scrollTop 数字，而是“哪条消息处于视口里的什么位置”。前面插入多少消息，可以变化；用户正在读的位置应尽量保持。

高度差补偿什么时候成立

常见做法是在插入前后测量列表总高度，把新增高度加回滚动位置：

新 scrollTop = 旧 scrollTop + 新 scrollHeight - 旧 scrollHeight

它适合只有顶部插入、已有内容高度稳定的情况。若此时底部也追加实时消息，总高度差会把底部变化一并算进去；如果旧图片稍后加载，高度还会继续变化。公式正确并不意味着使用前提总是成立。

用稳定消息 ID 建立锚点

插入前记录一条可见消息的稳定 ID，以及它的顶部相对滚动容器内容视口的距离。提交数据并等待布局更新后，再找到同一条消息，通过它的位置变化补偿滚动。

例如锚点原来位于容器顶部下方 24px，插入后位于 184px，就增加 160px 的滚动量。重点是同一条消息，而不是排序后仍占据相同数组下标的元素。

如果锚点被删除，应选择仍存在的邻近消息，或者给出明确的定位失败状态。不能继续使用另一个元素恰好复用的 DOM 位置。

异步高度和用户动作都需要参与

图片和附件卡片最好提前预留尺寸，减少首轮布局之后的变化。无法预估的内容，可以在相关尺寸改变后再次校正锚点，但只补偿影响阅读位置的变化。

用户开始拖动滚动条或主动滚动时，应停止旧的自动恢复任务。否则程序会把用户刚选择的位置拉回去。浏览器自身的滚动锚定也可能参与调整，需要确认当前容器的行为，避免两套机制对同一次变化重复补偿。

新消息不应该总是把人拉到底部

界面可以维护两种阅读意图：正在跟随最新消息，或者正在查看历史。收到新消息时，前者继续跟随底部；后者保持锚点，并展示可点击的新消息提示。

判断底部位置要允许少量测量误差，不能依赖浮点距离恰好等于零。切换会话时也应结束上一个会话尚未完成的定位任务，避免旧回调影响新列表。

验证需要真实布局变化

仅验证数组增加了记录不够。应检查插入前后同一条消息的屏幕位置，并让图片延迟加载、底部同时收新消息、窗口宽度改变，最后在恢复过程中手动滚动。

验收标准是阅读意图被保留：浏览历史时内容稳定，跟随最新时新消息可见，主动操作时程序让出控制权。