我有一个类似Facebook的应用程序，其中填充了提要。我的<body>有一个滚动，但这些提要位于一些嵌套的子组件<app-feeds>中。我想在不使用任何像ngx-infinite-scroll这样的库的情况下实现无限滚动...... 为了实现这一点，我在完整文档中使用了@HostListener()。但是控制台.log("结束"(在最后到达文档滚动时不会被触发。以下是我的实现...有人，请帮帮我。
@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>
您需要使用 console.log(( 查找 'offsetHeight'， 'scrollHeight' 属性的值。在我之前的一个项目中，我减去偏移值"20px"以执行滚动结束条件。它可能因浏览器而异。
所以我得到了这个问题的答案。 当然，无需任何库即可解决它。 元素本身滚动，而不是整个窗口。在这种情况下，由于整个窗口都是滚动，我需要另一种方法：
@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 中寻找类似的功能。