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

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

所以我得到了这个问题的答案。当然可以在没有任何图书馆的情况下解决它。元素本身滚动而不是整个 window。在这种情况下，由于整个 window 是滚动条，我需要另一种方法：

@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 文档滚动到末尾时不触发

console.log doesn't fire on document scroll reaches to end

javascript

infinite-scroll

angular