虚拟列表动态插入数据时需按位置差异处理：尾部追加不调 scrollTop 但更新总高度；头部插入须补偿 scrollTop；中部插入需重算偏移并刷新可视项，配合高度缓存与 scrollBy 微调可保持滚动稳定。

动态插入新数据时保持滚动位置稳定，是虚拟列表体验的关键。核心不是“锁住 scrollTop”，而是让新增项不挤动已有可视内容，同时让滚动锚点自然延续。

插入位置决定处理策略

新增数据在列表头部、中部或尾部，处理方式不同：

• 追加到末尾（最常见）：只要不触发重置，滚动位置默认不变；但需确保容器总高度正确更新，否则会出现“滚到底却还有空白”或“提前触底”
• 插入到头部（如消息上拉加载旧记录）：必须补偿 scrollTop，否则新内容会把当前视图顶上去。补偿值 = 新增项的累计高度
• 插入到中间（如实时插入一条通知）：需定位插入索引，重新计算该索引后所有项的偏移量，并更新 accumulatedHeights 数组；若插入点在可视区内，还需立即刷新 visibleItems

关键操作：高度缓存与偏移映射同步更新

动态插入依赖两个前提：已有项高度已知、新增项高度可快速获取。推荐流程：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 插入前，用 ResizeObserver 或渲染后 nextTick 获取新增 DOM 的真实高度（避免用预估高度）
• 将新高度写入 itemHeights Map，并调用函数重建 accumulatedHeights 数组（从插入点开始累加）
• 若插入点 ≤ 当前 startIndex，则按新增总高度调整 scrollTop；否则无需调整
• 强制触发 visibleItems 重新计算，确保新项（如在可视区）及时渲染

避免滚动跳变的细节技巧

用户无感知的前提是视觉连续性：

立即学习“前端免费学习笔记（深入）”；

• 不要在插入后立即重置容器 scrollTop —— 改为用 scrollBy({ top: delta, behavior: 'auto' }) 微调
• 对头部插入场景，可先记录原 firstVisibleItem 的 offset，插入后再滚动到相同 offset 对应的新索引位置
• 配合 CSS contain: layout style，防止新增 DOM 触发整页重排，影响滚动平滑度

滚动位置不是状态，而是高度映射的结果。只要 accumulatedHeights 准确、插入逻辑与偏移计算闭环，位置就能稳住。