Ionic Scroll Bottom ?*


I am not sure what is hapening in your case on iOS. Have you implemented counter in your app which updates view or something which monitors scrolling and updates view?
I can’t say if my app has same issue in iOS (its stucked due to “NSApp Transport Security” because of http).

I followed Angular life hooks to implement this feature. I tried to replace ngAfterViewChecked() with other checks, but didn’t worked for me. Try other hooks to see if any works for you.

You can also try mutation observer to check for changes in DOM.

If none of above solutions work, we can try to find a way of using ngZone to limit scope/elementes for change detections.


In my 2nd suggested answer(the OR part), I am comparing height of content container with its previous height.
I think you can use this to prevent unwanted scrolls.

The ngAfterViewChecked() gets called even on touch/click event. May be this could be reason that your app is auto scrolling while scrolling.


I’ve learned a few things when it comes to autoscrollers;

• Never auto scroll from your back-end;
• Never put autoscrollers in setIntervals();
• They’re nearly impossible without a badass framework like Ionic.

I’ve been working on a chat app in Ionic V1 for 2 1/2 years and no autoscrollers works as good as it does using it with sockets.

My recommendation for anyone to ever see this post; use Ionic V2+ and then use your socket to operate the content scrolling mechanism when needed.

I know this may be like “wow kid” to some of the elite master Ionic Devs, but it’s a tip for the intermediate/simi advanced Ionic Devs.



There’s a CSS solution for this that works way smoother.

I was running into the same issues, and trying to solve it with .scrollToBottom() and timeouts and whatnot. the solution was passable at best. But definitely not great.

This answer did it for me. For Ionic 3, I just added this to the css of the page:

.scroll-content {
    overflow: auto;  /* redundant, but just in case */
    display: flex; /* redundant, but just in case */
    flex-direction: column-reverse;

Be sure to have a div inside your <ion-content> that contains all the other content, otherwise your content will be ordered in reverse.


I’ve not had a moment to study flex or the grids yet. I’ve fooled with them a little when they were released, they seem very complex… But, they seem bad ass. Great tip! :smiley: