angular - 使用 CDK 自动调整虚拟滚动策略保持滚动位置

Question

使用 CDK 自动调整虚拟滚动策略保持滚动位置
我有一个很大的项目列表，可以使用 <cdk-virtual-scroll-viewport autosize> 滚动。由 @angular/cdk-experimental 提供(项目具有动态高度，因此我使用此滚动策略而不是 FixedSizeVirtualScrollStrategy )。
随着时间的推移，新项目被插入到列表中，即它们被附加到顶部。当用户向下滚动时，我想避免新项目将视口(viewport)中的项目推开。因此，我需要一种机制来在添加项目后保持/恢复滚动位置。
我有一个半有效的解决方案(而且很麻烦，因为它读取私有(private)字段)，但是在添加项目后视口(viewport)会随机移动几个像素。
以下是相关代码部分:

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

...

// After new items have been added:

const offset = this.viewport.measureScrollOffset('top');
const topPosition = offset + newItems.length * this.viewport['_scrollStrategy']._averager._averageItemSize; // the autosize strategy determines an average item size I'm trying to use to determine how the viewport should be shifted

this.viewport.scrollTo({
  top: topPosition
});

我在这里创建了这种方法的演示: https://stackblitz.com/edit/angular-be926g?file=src/app/cdk-virtual-scroll-overview-example.ts
任何想法如何通过恒定视口(viewport)无缝实现这一目标？

Answer 1

您可以使用 this.viewport.getRenderedRange()检查视口(viewport)是否在顶部，如果为零，则附加元素，否则将元素保留在存储桶中，并在用户滚动到视口(viewport)顶部时附加对象。

  const range = this.viewport.getRenderedRange();
  console.log("range", range);
  bucket = [...bucket, ...newItems];
  console.log("bucket", bucket);
  if (range.start == 0) {
    this.items = [...bucket.reverse(), ...this.items];
    bucket = [];
  }

stackblitz example