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

【问题标题】：How to use cdk-virtual-scroll with ngx-infinite-scroll如何将 cdk-virtual-scroll 与 ngx-infinite-scroll 一起使用
【发布时间】：2022-12-14 17:19:07
【问题描述】：

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

@angular/核心：^14.2.9
@angular/cdk: ^14.2.9
@角/材料：^14.2.6
ngx-无限滚动：~14.0.1

在那之后，无限滚动（带虚拟化）停止工作。

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

<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，此属性是必需的。所以，这两件事是并驾齐驱的。

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

【问题讨论】：

标签： angular virtualization infinite-scroll angular-cdk angular-cdk-virtual-scroll

【解决方案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。这行得通，但我仍在寻找更好的解决方案。

【讨论】：