Question

我有一个类似Facebook的应用，其中填充了供稿。我在<body>上有一个滚动条，但是这些提要位于某些嵌套的子组件<app-feeds>中。我想使用ngx-infinite-scroll之类的任何库来实现无的无限滚动...。为了实现这一点，我在整个文档上使用了@HostListener()。但是，最后到达文档滚动时，不会触发console.log（'End'）。下面是我的实现...有人，请帮助我。

@ViewChild('feedSection') el: ElementRef;

@HostListener('document:scroll', ['$event'])
  onScroll(event: any) {
    const elm = this.el.nativeElement;
    if (elm.offsetHeight + elm.scrollTop >= elm.scrollHeight) {
      console.log('End');
    }
  }

我的app-feed组件是

<app-home>
   <div #feedSection class="feed-container">
     ...
   </div>
</app-home>

Answer 1

您需要使用console.log（）查找'offsetHeight'，'scrollHeight'属性的值。在我以前的项目之一中，我减去了'20px'的偏移值以执行滚动结束条件。不同的浏览器可能会有所不同。

Answer 2

所以我得到了这个问题的答案。解决它，当然没有任何库。元素本身滚动而不滚动整个窗口。在这种情况下，因为整个窗口都是滚动的，所以我需要另一种方法：

@HostListener('document:scroll', ['$event'])
    onScroll(event: any) {
    const boundingBox = document.documentElement.getBoundingClientRect();
    if (boundingBox.height - window.scrollY === window.innerHeight) {
      console.log('End');
    }
  }

PS- Gitter上的一个人（@alpox）向我建议了这种方法，并且效果很好。因此，我将其发布在这里，以防其他人在Angular中寻找类似功能。

console.log不会在文档滚动到达末尾时触发

2 个答案: