.scrollBottom(true) not working (but .scrollBottom(false) works)


#1

Hi guys,

my ion content isn’t scrollable if I use .scrollBottom(true) - it scrolls to the bottom but the content isn’t scrollable anymore.
It works when I use .scrollBottom(false).
(actually there are other problems, e.g. lagging, sometimes the content become blank/items only partially displayed…, but at least the content is scrollable)

Below are my code snippet:

HTML:
<ion-content overflow-scroll="true" delegate-handle="chatsScroll">
  <div ng-repeat="(key, msg) in messages">
    <p>{{key}}:{{msg}}</p> <!-- simplified, not working anyway -->
  </div>
</ion-content>

INSIDE CONTROLLER:
/* scroll to bottom when there is new message */
msgRef.on('child_added', function(childSnapshot, prevChildKey) {
   $timeout(function() {
   // tried putting "chatScroll.resize();" here as some suggested, but doesn't work...
  // tried using anchorScroll too, but as long as I set animation to true then it doesn't work...
   chatsScroll.scrollBottom(true); // it works if I use ".scrollBottom();"
  }, 0);
});

Has anyone has the same problem before? Thanks!


#2

Update:

after some random trying, I found that if I set overflow-scroll="false", the ion-content is scrollable again (and the animation works too).

So my problem is solved. (though I am still curious why it doesn’t work before)


#3

I don’t think you actually solved the original scroll problem by setting overflow-scroll=“false” but rather you enabled jsScrolling (javascript scrolling) which masks the problem, and does not perform as well as native scrolling. If you can live with js scrolling I guess you are ok…

I only ran into this issue after upgrading to ionic 1.2.4 from 1.1.

I ran into the same issue that you did and found that for some reason when animation is enabled the style of the ion-content element gets changed to : overflow: hidden. This causes the content to no longer be scroll-able.

I’m not sure if this is a bug yet? But for now I just disabled animation by setting .scrollBottom(false) which works for me.

P.S. I only experienced this behavior in android, it seems to work in ios.