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

标签 javascript angular infinite-scroll

我有一个类似 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>

最佳答案

您需要使用 console.log() 找到“offsetHeight”、“scrollHeight”属性的值。在我之前的一个项目中,为了执行滚动结束条件,我减去了“20px”的偏移值。它可能因浏览器而异。

关于javascript - console.log 不会在文档滚动到达末尾时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51979856/

相关文章:

javascript - window.document 的类型错误 : Object is possibly 'null' . TS2531

javascript - 网络钩子(Hook)是什么意思?

java - 当用户点击后退按钮时,如何重建客户端修改的页面?

javascript - 代码拆分 `import` 破坏了 Jest 测试

javascript - 在普通桌面浏览器中测试时如何将 sqlite 与 cordova 一起使用?

javascript - Angular 2 : many Async pipes vs one subscribe

javascript - 在 Angular 8 和 9 中提供和注入(inject) 'Window' 与 Window 有什么区别?

angular - npm 上的 angular-cli 和 @angular/cli 有什么区别

jquery - 无限滚动 完成后删除分页器

javascript - QtQuick2-QML-创建无限动线动画