CODEWITHSUNDEEP
javascriptangularjsionic-framework
Hugo H
Hugo H

Reputation: 6362

Ionic : how to detect bottom scroll?

For a chat app, I wanted to know if my ion-content is scrolled at bottom, to scroll down again after adding a message only if the user is already at bottom.

It it any possibility to easily detect when the content is scrolled?

Upvotes: 1

Views: 3346

Answers (2)

Code Spy
Code Spy

Reputation: 9954

we can use on-scroll or on-scroll-complete events on content then we need to call function in controller like below

 $scope.checkScroll = function() {
     var currentTop = $ionicScrollDelegate.getScrollPosition().top;
     var maxTop = $ionicScrollDelegate.getScrollView().__maxScrollTop;
     if (currentTop >= maxTop) {
     // hit the bottom

    }
};

Complete tutorial is given here http://freakyjolly.com/detect-ionic-view-page-bottom-load-infinite-data/

Upvotes: 1

Hugo H
Hugo H

Reputation: 6362

Looking at $ionicScrollDelegate.getScrollView(), I found a __maxScrollTop property.

The answer is quite simple: 

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

if (!scrollBottom) {
  $ionicScrollDelegate.scrollBottom(true);
}

You can even add some tolerance by checking if scrollBottom is lower than your tolerance limit.

Upvotes: 9

Related Questions