如何阻止ngx-virtual-scroller添加项时的自动滚动行为？

问题背景 #

使用ngx-virtual-scroller搭配顶部切换组件，切换时会向虚拟滚动器中添加额外项：

• 当添加的项位于当前可视区域之前时，会触发意外自动滚动
• 在顶部位置添加下方项时显示正常，但在中间位置操作时滚动行为不符合预期
• 尝试通过保存startIndex再调用scrollToIndex修复，存在闪烁、定位不准、多次更新后位置偏移的问题

核心原因 #

用startIndex定位的问题在于：新增前置项后，原有列表项的索引会整体偏移，虚拟滚动器内部的索引计算和实际可视位置无法精准匹配，导致滚动偏差。

解决方案：基于滚动位置锁定而非索引 #

直接操作滚动容器的scrollTop值，结合新增前置项的总高度调整，能避免索引偏移带来的问题，同时减少闪烁。

具体实现（固定项高度场景）

// 1. 更新前保存当前滚动位置与新增项总高度
const scrollContainer = this.scroller.elementRef.nativeElement;
const originalScrollTop = scrollContainer.scrollTop;
// 假设每个项高度固定为itemHeight，新增项数量为newItems.length
const addedItemsTotalHeight = this.newItems.length * this.itemHeight;

// 2. 执行数据更新（添加前置项）
update();

// 3. 在下一个宏任务中恢复滚动位置
setTimeout(() => {
  // 新增前置项会把原有内容向下推，所以要在原scrollTop基础上加上新增项总高度
  scrollContainer.scrollTop = originalScrollTop + addedItemsTotalHeight;
}, 0);

动态项高度场景适配

如果项高度不固定，需要动态计算新增项的实际总高度：

// 1. 保存原滚动位置
const scrollContainer = this.scroller.elementRef.nativeElement;
const originalScrollTop = scrollContainer.scrollTop;

// 2. 执行数据更新
update();

// 3. 计算新增项实际总高度并恢复滚动
setTimeout(() => {
  // 假设你的项有统一的类名'.virtual-item'
  const addedItems = document.querySelectorAll('.virtual-item');
  let addedTotalHeight = 0;
  // 只取新增的前N项（N为本次新增数量）
  for (let i = 0; i < this.newItems.length; i++) {
    addedTotalHeight += addedItems[i].offsetHeight;
  }
  scrollContainer.scrollTop = originalScrollTop + addedTotalHeight;
}, 0);

优化闪烁问题

• 使用setTimeout确保虚拟滚动器完成DOM重绘后再调整滚动位置
• 若仍有闪烁，可在更新前临时禁用虚拟滚动器的自动调整，完成后再启用：

// 更新前禁用自动调整
this.scroller.autoResize = false;

// 保存滚动位置与新增项高度
const scrollTop = this.scroller.elementRef.nativeElement.scrollTop;
const addedHeight = this.newItems.length * this.itemHeight;

// 更新数据
update();

// 恢复配置与滚动位置
setTimeout(() => {
  this.scroller.elementRef.nativeElement.scrollTop = scrollTop + addedHeight;
  this.scroller.autoResize = true;
  // 强制刷新虚拟滚动器
  this.scroller.refresh();
}, 0);

内容的提问来源于stack exchange，提问作者Juri