Angular升级后cdk-virtual-scroll与ngx-infinite-scroll兼容问题求助

升级依赖后出现的scrollWindow属性冲突问题，可以通过以下几种方式解决：

1. 强制设置视口容器的滚动样式 #

当设置scrollWindow="false"时，CDK虚拟滚动视口可能无法自动添加滚动相关样式，直接通过CSS强制给.virtualScrollViewport类添加固定高度和滚动属性：

.virtualScrollViewport {
  /* 根据需求设置固定高度，比如占满视口高度或指定像素值 */
  height: calc(100vh - 120px);
  overflow-y: auto;
}

这样容器会强制生成滚动条，同时ngx-infinite-scroll能正确监听内部滚动事件。

2. 移除ngx-infinite-scroll，使用CDK原生滚动监听 #

CDK虚拟滚动本身提供了滚动事件监听能力，完全可以替代ngx-infinite-scroll，避免依赖冲突：

修改模板代码 #

<cdk-virtual-scroll-viewport
  *ngIf="items.length"
  class="virtualScrollViewport"
  itemSize="80"
  minBufferPx="400"
  maxBufferPx="600"
  (scrolledIndexChange)="handleScroll()"
>
  <div><p class="text-bold">Available items</p></div>
  <mat-card *cdkVirtualFor="let item of 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>

组件类中添加逻辑 #

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { ViewChild } from '@angular/core';

@Component({
  // 组件配置
})
export class YourComponent {
  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;

  handleScroll() {
    const renderedRange = this.viewport.getRenderedRange();
    const totalItems = this.viewport.getDataLength();
    
    // 判断是否滚动到接近底部（比如最后10个元素时触发加载）
    if (renderedRange.end >= totalItems - 10 && !this.loading && this.canLoadMoreItems) {
      this.onScroll(); // 调用原有的加载逻辑
    }
  }
}

3. 手动指定ngx-infinite-scroll的滚动容器 #

在保留ngx-infinite-scroll的前提下，通过infiniteScrollContainer属性明确指定滚动容器的选择器，确保库能正确绑定到CDK视口的滚动事件：

<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"
  [infiniteScrollContainer]="'.virtualScrollViewport'"
  (scrolled)="onScroll()"
>
  <!-- 内容不变 -->
</cdk-virtual-scroll-viewport>

同样需要给.virtualScrollViewport添加固定高度和overflow-y: auto的CSS样式。

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