使用父滚动条而不是带有角度虚拟滚动的子组件滚动条

Question

上下文

我正在使用角度虚拟滚动来显示一长串元素。我的设计非常简单，如下图所示。

当前行为

目前，虚拟滚动条有自己的滚动条，其操作方式与父滚动条不同。这使得滚动到页脚非常乏味。即当您滚动到列表末尾时，它不会滚动到页脚。

期望的行为

我希望虚拟滚动容器使用父滚动条而不是它自己的滚动条，以便在到达列表末尾时恢复常规滚动。

可以在此处找到说明不良行为的 Stackblitz：https://stackblitz.com/angular/aemdyrjmebn

Answer 1

这是浏览器原生的默认滚动行为（我在 Chrome 上尝试过）。例如，MDN 上的 overflow: scroll 示例也会发生同样的情况：容器完全向下滚动后，直到 鼠标移动 才会开始滚动父窗口/窗口。这也是 Angular 虚拟滚动发生的情况

如果有其他方法可以实现您正在寻找的内容，则需要在虚拟容器滚动到底部时执行此操作 - 您可以使用以下代码获取此事件：

@ViewChild(CdkVirtualScrollViewport, {static: false}) virtualScroll: CdkVirtualScrollViewport;

ngAfterViewInit() {
  this.virtualScroll.elementScrolled().pipe(
    filter(event => {
      return this.virtualScroll.measureScrollOffset('bottom') === 0;
    }),
    tap((event)=> {
      // do something here
    })
  ).subscribe()
}