如何使用angular cdk虚拟滚动一次滚动两个列表？

npm install @angular/cdk

import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

<cdk-virtual-scroll-viewport itemSize="50" class="list1" #list1>
  <div *cdkVirtualFor="let item of list1Data">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

<cdk-virtual-scroll-viewport itemSize="50" class="list2" #list2>
  <div *cdkVirtualFor="let item of list2Data">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

import { ViewChild } from '@angular/core';

export class YourComponent {
  @ViewChild('list1') list1: CdkVirtualScrollViewport;
  @ViewChild('list2') list2: CdkVirtualScrollViewport;

  // ...

  ngAfterViewInit() {
    this.list1.scrolledIndexChange.subscribe(index => {
      this.list2.scrollToIndex(index);
    });

    this.list2.scrolledIndexChange.subscribe(index => {
      this.list1.scrollToIndex(index);
    });
  }
}