Ionic : how to detect bottom scroll?

Question

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?

You have provided no code from your application and made no clear attempt at trying to solve it yourself or research the issue. If you hadn't of immediately answered your own question, how did you expect anyone to help when there's nothing to work from? That is why I down voted. — Ankh
– Ankh, Commented Apr 14, 2016 at 14:57
Yeah, but SO provide a way to answer your own questions, to help the community, and I think the answer is quite self explanatory for anyone who use Ionic... Try asking a new question : don't you see the checkbox at the bottom of the form: "Answer your own question – share your knowledge, Q&A-style"? — Hugo H
– Hugo H, Commented Apr 14, 2016 at 18:37
Here is what happened: I searched for around half an hour, without finding any solution on SO. When I figured out something, I though it should be good to share it with other. Please don't judge too fast, man. — Hugo H
– Hugo H, Commented Apr 14, 2016 at 18:38

Hugo H · Accepted Answer · 2016-04-14 09:42:53Z

9

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.

answered Apr 14, 2016 at 9:42

Hugo H

6,3926 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ankh Over a year ago

You asked and answered your own question literally seconds apart?

Hugo H Over a year ago

This is why there is a "Answer your own question – share your knowledge, Q&A-style" checkbox... To help others because I have to search for half an hour before I find a solution... So why the downvote?

Code Spy · Accepted Answer · 2017-04-01 18:56:52Z

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/

Collectives™ on Stack Overflow

Ionic : how to detect bottom scroll?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related