[solved] Ionic 2 - Detecting Scroll and figuring out scroll position

Guys,

Do you use whatsapp ? It detects when user has scrolled up, for instance, he’s reading some old messages, and when that happens, a floating button appears so the user can click to scroll down.

So I need to detect when the scroll is all the way down.

I started coding here, please check this out:

// When the view enters I can make the magic begin

 ionViewDidEnter() {
    this.content.ionScrollEnd.subscribe((data)=>{
      // My ideia is to get the whole content dimensions
      let dimensions = this.content.getContentDimensions();

      console.log("Dimensions");
      console.log(dimensions);
      console.log("Scroll ");
      console.log(data);
       
     // And compare it with the scroll data. 
      if(dimensions.contentTop == data.scrollTop){
        console.log("Looks like I'm in the bottom of the scroll element!");
      }

    });
  }

If you read the comments on my code (if not, please do), you’d understood that I was trying to compare the hole height of the content to the actual scroll position.
For eg.: if my ion-content has 5201px height, and scrollTop is 5201, so scrollbar is all the way down.

But this didnt work, because I cant seem to get that full dimension. How can I adjust this?

Thank you

1 Like

Where is the ionic 2 “max scroll top”?

Seems to me that you could use for ionic 1


var scrollTopCurrent = $ionicScrollDelegate.getScrollPosition().top;
var scrollTopMax = $ionicScrollDelegate.getScrollView().__maxScrollTop;
var scrollBottom = scrollTopMax - scrollTopCurrent;

if (!scrollBottom) {
  $ionicScrollDelegate.scrollBottom(true);
}
this.content.ionScroll.subscribe(($event: any) => {
      let scrollTop: number = $event.scrollTop;
});

Close, I manage to fix it.

Here’s the code:


 ionViewDidEnter() {
    this.content.ionScrollEnd.subscribe((data)=>{

      let dimensions = this.content.getContentDimensions();

      let scrollTop = this.content.scrollTop;
      let contentHeight = dimensions.contentHeight;
      let scrollHeight = dimensions.scrollHeight;

      if ( (scrollTop + contentHeight + 20) > scrollHeight) {
        this.shouldScrollDown = true;
        this.showScrollButton = false;
      } else {
        this.shouldScrollDown = false;
        this.showScrollButton = true;
      }

    });
  }

Thank you for helping!

3 Likes