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

Question

最近想实现一个列表项的分页功能。现在，分页可以很好地处理滚动事件，当我滚动到底部时它会转到下一页，当我滚动到列表区域的顶部时它会转到上一页。但是当我将滚动条拖到底部时，滚动条的箭头按钮变成灰色，我无法再加载数据。我只想知道我应该在@HostListener 中使用哪个事件，或者还有其他方法可以实现此功能？

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

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

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

Answer 1

您需要监听 scroll 事件而不是 mousewheel。如果拖动滚动条，也会触发滚动事件。如果你想实现一个性能更高的版本，而不是运行每个滚动事件的 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 没有。

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

How to realize pagination by dragging the scroll bar to the top or bottom position?

pagination

typescript

angular-directive

angular