用父滚动条代替带角虚拟滚动条的子组件滚动条

Question

上下文

我使用角虚拟卷轴来显示一长串元素。我的设计非常简单，可以在下面的图片中看到。

​

​

当前行为

目前，虚拟滚动条有自己的滚动条，其操作方式与父滚动条不同。这使得滚动到页脚非常繁琐。也就是说，当你滚动到列表的末尾时，它不会滚动到页脚。

期望行为

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

这里可以找到一个Stackblitz，它说明了不想要的行为：https://stackblitz.com/angular/aemdyrjmebn

Answer 1

这是浏览器固有的默认滚动行为(我在Chrome上试用过)。例如，overflow: scroll示例在MDN上也会发生同样的情况:在容器完全向下滚动之后，直到移动鼠标时，父/窗口的滚动才会开始。这也是角虚拟滚动的结果

如果有另一种方法来实现您想要实现的目标，那么当虚拟容器被滚动到底部时，您就需要这样做--您可以使用以下代码获得这个事件：

@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()
}