检测底部滚动条

Question

我正在做一些表单验证，但我被困在“条款和条件”页面上。我在屏幕底部固定了一个按钮（始终可见）和“条款和条件”文本。如果用户尚未滚动到文本底部，则该按钮将被禁用。但我不知道如何检查是否已到达文本底部......这就是我请求您帮助的原因。

先感谢您

编辑：我尝试了这样的事情（我在 StackOverflow 上找到的）：

    @HostListener("window:scroll", ["$event"])
    onWindowScroll() {
      //In chrome and some browser scroll is given to body tag
      let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
      let max = document.documentElement.scrollHeight;
      // pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
      if (pos == max) {
       console.log("done");
    }
  }

还有另一件事，content.directionY但它对我不起作用

Answer 1

您可以在此处ionScroll使用事件

因为没有scrollBottom（它是`scrollTop的对应项），所以你需要自己获取它。所以在这里：

在您的 中.html，添加(ionScroll)以处理任何滚动事件

<ion-content (ionScroll)="detectBottom()">
....
</ion-content>

而在你的.ts

//make sure you import the correct modules
@ViewChild(Content) content: Content;
...
detectBottom(){
    if(this.content.scrollTop == this.content.scrollHeight - this.content.contentHeight){
    console.log("bottom was reached!");
    }
}

滚动事件发生在 Angular 区域之外。这是出于性能原因。因此，如果您尝试将值绑定到任何滚动事件，则需要将其包装在zone.run()

请参考stackblitz 上的这个例子