如何通过将滚动条拖动到顶部或底部位置来实现分页？

Question

最近，我想实现我的项目列表的分页功能。现在分页与滚动事件一起工作正常，当我滚动到底部时它会转到下一页，或者当我滚动到列表区域的顶部时它会转到上一页。但是当我将滚动条拖到底部时，滚动条的箭头按钮变为灰色，我无法再加载数据。 我只想知道我应该在@HostListener 中使用哪个事件，或者可能有其他方法来实现这个功能？

每次滚动到底部时会加载 25 个项目，我在 DOM 树中总共保留 50 个项目。所以 DOM 树中的项目一直不超过 50 个。

我没有使用虚拟滚动的原因是列表中的项目没有相同的高度，所以我不能为虚拟滚动应用固定高度的属性。

//scroll-directive
@HostListener('mousewheel', ['$event'])  //mousewheel
  track(event: WheelEvent) {
    this.scrolls.next(event);
  }

Answer 1

您需要监听 scroll 事件而不是 mousewheel。如果拖动滚动条，也会触发 Scroll 事件。如果你想实现一个不会在每个滚动事件上运行 ChangeDetection 的性能更高的版本，你可以这样做：

@ViewChild('scrollContainer') private scrollContainer: ElementRef;

ngOnInit() {
    this.ngZone.runOutsideAngular(() => {
        this.scrollContainer.nativeElement.addEventListener('scroll', (ev: Event) => {
            // Do your fetch checks here and don't forget 
            // to run the fetching inside the zone again
            this.ngZone.run(() => {
                // Do fetch
            });
        });
    });
}

更新

如果您可以收听mousewheel，但在收听scroll 时未触发处理程序，那么您的宿主元素可能不是滚动容器，而是它的子元素。然后mousewheel仍然在宿主元素上触发，因为它在冒泡，但scroll没有。