angular - 如何将 cdk-virtual-scroll 与 ngx-infinite-scroll 一起使用

Question

我已经升级了我的 Angular 项目依赖项:

• @ Angular/核心:^14.2.9
• @Angular/cdk:^14.2.9
• @ Angular/ Material :^14.2.6
• ngx-infinite-scroll:~14.0.1

此后，无限滚动(带有虚拟化)停止工作。

我观察到，如果 scrollWindow 属性设置为 false，则 cdk-virtual-scroll-viewport 不再添加滚动> 并且 ngx-infinite-scroll 需要将该属性设置为 false。

<cdk-virtual-scroll-viewport
  *ngIf="items.length"
  class="virtualScrollViewport"
  itemSize="80"
  minBufferPx="400"
  maxBufferPx="600"
  infiniteScroll
  [infiniteScrollDistance]="1"
  [infiniteScrollThrottle]="50"
  [infiniteScrollDisabled]="loading || !loaded || !canLoadMoreItems"
  [scrollWindow]="false"
  (scrolled)="onScroll()"
>
  <div><p class="text-bold">Available items</p></div>
  <mat-card *cdkVirtualFor="let itemof items; trackBy: trackByFunction">
    <mat-card-content>
      ...
    </mat-card-content>
  </mat-card>

  <mat-progress-bar *ngIf="loading && items?.length" mode="indeterminate"></mat-progress-bar>
</cdk-virtual-scroll-viewport>

现在滚动不再显示(不再添加.cdk-virtual-scrollable类)。如果没有 [scrollWindow]="false" ，但是无限滚动不起作用，因为基于它们的 documentation这个属性是必要的。因此，这两件事是正面交锋的。

有人遇到过同样的问题并找到解决方法吗？

Answer 1

@ViewChild(CdkVirtualScrollViewport)


 set scrollEvent(scrollRef: CdkVirtualScrollViewport) {if (scrollRef) {
  if (
    //note: scrolled container size must be greater than 0, we have to scroll from the top and bottom must have an offset smaller than 50 to trigger
    scrollRef.measureRenderedContentSize() > 0 &&
    scrollRef.measureScrollOffset("top") !== 0 &&
    scrollRef.measureScrollOffset("bottom") < 50
  ) {
    this.scrolled.emit();
  }
} }

我也遇到了同样的问题，我想出了一个解决方法。所以你可以自己监听滚动事件并添加你自己的滚动事件显示规则。所以在我的例子中，我检查元素是否有高度，我们从顶部开始滚动，底部是否至少为 50px。这可行，但我仍在寻找更好的解决方案。