Angular Material CDK 多虚拟视口自动滚动仅首个生效问题求解

核心问题原因 #

现有代码仅能触发第一个列表滚动，根本问题在于：

• 使用@ViewChild(CdkVirtualScrollViewport)装饰器查询视口实例时，无指定过滤条件，默认仅返回DOM树中第一个匹配CdkVirtualScrollViewport类型的元素实例，后续同类型视口完全不会被纳入查询范围，因此无法执行滚动逻辑。

分场景实现方案 #

固定数量列表场景（当前示例2个列表的情况） #

1. 修改HTML模板，为每个视口元素添加独立的模板引用标记：

<button (click)="onButtonClick()">Scroll to end</button>

<div class="container">
  <cdk-virtual-scroll-viewport 
    #viewport1
    itemSize="50" 
    minBufferPx="200" 
    maxBufferPx="400"
    class="example-viewport">
    <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
  </cdk-virtual-scroll-viewport>

  <cdk-virtual-scroll-viewport 
    #viewport2
    itemSize="50" 
    minBufferPx="200" 
    maxBufferPx="400"
    class="example-viewport">
    <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
  </cdk-virtual-scroll-viewport>
</div>

2. 调整组件TypeScript代码，通过模板引用分别获取每个视口实例，点击时同步触发所有视口的滚动逻辑：

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';

@Component({
  selector: 'cdk-virtual-scroll-fixed-buffer-example',
  styleUrls: ['cdk-virtual-scroll-fixed-buffer-example.css'],
  templateUrl: 'cdk-virtual-scroll-fixed-buffer-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollFixedBufferExample implements AfterViewInit {
  // 绑定模板引用，分别获取独立视口实例
  @ViewChild('viewport1') viewPort1: CdkVirtualScrollViewport;
  @ViewChild('viewport2') viewPort2: CdkVirtualScrollViewport;
  items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);

  constructor(private cdr: ChangeDetectorRef) {}

  onButtonClick() {
    // 对每个视口单独执行滚动
    this.viewPort1.scrollToIndex(100, 'smooth');
    this.viewPort2.scrollToIndex(100, 'smooth');
  }

  ngAfterViewInit(): void {
    // 适配OnPush变更检测策略，确保视口实例加载完成后触发视图更新
    this.cdr.detectChanges();
  }

动态数量列表场景 #

如果场景中是动态渲染、数量不固定的虚拟滚动列表，无需逐个添加模板引用，直接通过@ViewChildren批量获取所有视口实例即可：

import { QueryList, ViewChildren } from '@angular/core';
// 其余导入同固定场景
export class CdkVirtualScrollFixedBufferExample {
  // 批量查询所有匹配的视口实例
  @ViewChildren(CdkVirtualScrollViewport) viewPorts: QueryList<CdkVirtualScrollViewport>;
  items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);

  onButtonClick() {
    // 遍历所有视口实例，统一执行同步滚动
    this.viewPorts.forEach(viewport => {
      viewport.scrollToIndex(100, 'smooth');
    })
  }
}

常见注意事项 #

• 视口实例的赋值时机在ngAfterViewInit生命周期之后，禁止在ngOnInit阶段直接调用视口滚动方法，否则会出现实例未定义的报错
• 当组件开启OnPush变更检测策略时，视口内容更新可能存在延迟，需要手动触发一次变更检测保证滚动逻辑正常执行

内容的提问来源于stack exchange，提问作者Alex Heebs