Detect bottom scroll

Question

I'm doing some Forms validations and I'm stuck on a "terms and conditions" page. I have a button fixed at the bottom of the screen (always visible) and a "terms and conditions" text. The button is disabled if the user hasn't scrolled to the bottom of the text. But I don't know how to check if the bottom of the text is (was) reached... and that's why I ask for your help.

Thank you in advance

Edit: I tried something like this (that I found on 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");
    }
  }

And the other thing with content.directionY but it didn't work for me

Answer 1

You can use the ionScroll events here

since there is no scrollBottom (which is a counterpart for `scrollTop), you need to get it yourself. So here:

In your .html, add (ionScroll) to handle any scroll events

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

And in your .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!");
    }
}

Scroll events happen outside of Angular's Zones. This is for performance reasons. So if you're trying to bind a value to any scroll event, it will need to be wrapped in a zone.run()

Please refer to this example on stackblitz