Question

我正在进行一些Forms验证，并且停留在“条款和条件”页面上。我在屏幕底部固定了一个按钮（始终可见），并显示了“条款和条件”文本。如果用户尚未滚动到文本底部，则该按钮将被禁用。但是我不知道如何检查是否到达文本的底部...这就是为什么我寻求您的帮助。

提前谢谢

编辑：我尝试过这样的事情（在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个事件here

由于没有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()
中

请参阅此example on stackblitz

Answer 2

您可以使用Scroll事件来检测滚动位置

Stackblitz Example

  @HostListener('scroll') onScroll(event){
    console.log('1');
     //Get the Value of scroll position
        this.top=this.eleRef.nativeElement.scrollTop;
        //Get the Height of the Element.This property normally  include padding and margin
        this.offSetHeight=this.eleRef.nativeElement.offsetHeight;
        // ScrollHeight is a measurement of the height of an element's content including
        this.scrollHeight=this.eleRef.nativeElement.scrollHeight; 
        // content not visible on the screen due to overflow
        //  console.log('Top:'+this.top,'Scroll height:'+this.eleRef.nativeElement.scrollHeight,'offsetHEight:'+this.offSetHeight);
        //IF the scroll position is zero which means it is at the top 
        if(this.top === 0){
           console.log('top');
        }
        //check the scroll at bottom or top
        if(this.top>this.scrollHeight-this.offSetHeight-1){
          console.log('bottom');

        }
  }

检测底部滚动

2 个答案: