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


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() {
      // My ideia is to get the whole content dimensions
      let dimensions = this.content.getContentDimensions();

      console.log("Scroll ");
     // 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) {
this.content.ionScroll.subscribe(($event: any) => {
      let scrollTop: number = $event.scrollTop;

Close, I manage to fix it.

Here’s the code:

 ionViewDidEnter() {

      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!