CODEWITHSUNDEEP
angularionic3
FairPluto
FairPluto

Reputation: 737

Detect bottom scroll

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

Upvotes: 4

Views: 6550

Answers (2)

Mystery
Mystery

Reputation: 1031

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

Upvotes: 5

Chellappan வ
Chellappan வ

Reputation: 27471

You can use Scroll event to detect the scroll position

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');

        }
  }

Upvotes: 0

Related Questions