angular - 如何在虚拟滚动中回到数据集的同一部分？

Question

有一种优化大型数据集渲染的奇妙模式，称为虚拟滚动。在这种特定情况下，我使用 Angular Material CDK api 的https://material.angular.io/cdk/scrolling/overview来获得该行为。但是，当用户导航到不同的页面并返回时，我有一个要求，用户应该在她离开的那个特定位置（例如导航到项目 3498 的详细信息，返回时应该从项目 3498 而不是项目 1 开始）。实现这一目标的最佳方法是什么？

Answer 1

实施了 Francesco Borzi 的建议，并且效果很好。这是 stackblitz 的实现。大多数操作发生在 cdk-virtual-scroll-overview-example 文件中。

Answer 2

您可以注入CdkVirtualScrollViewport视图子项：

@ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;

然后您可以使用 和 之类的方法this.getOffsetToRenderedContentStart()来this.setRenderedContentOffset()保存和恢复原始滚动位置。

例如，您可以将此信息存储在服务或本地存储中。

Answer 3

值得一提的是，还有另外一对有用的方法：measureScrollOffset 和 scrollToOffset。方法measureScrollOffset：

获取从视口开始的当前滚动偏移量（以像素为单位）。

因此，它考虑了用户看到的内容，而不是渲染的内容——比如 getOffsetToRenderedContentStart——对于这种方法，我无法检索相对较小的滚动值。