How to make the sccollbar of content element scroll down to the bottom automatically


@max , i have troubles in using ionic,i don’t know how to make the sccollbar of content element scroll down to the bottom automatically?


T_T anybody here???


Thanks to @maxlynch for the solution:

controller('MyCtrl', function($scope, $ionicScrollDelegate) {
  // When something happens

For me, I just needed this to happen whenever somebody added a message to my chat:


<input type="text" ng-model="msg.body" />

<button class="button button-clear button-positive" ng-click="send(msg.body)">Send</button>


.controller('chatController', function($scope, $ionicScrollDelegate, Chats) {
  $scope.send = function() {
    // Using my Chats service to do some async/persistence
    Chats.send( $scope.msg.body );
    // Make the chat window scroll to the bottom 


Just a comment, you may want to use


If you’d like the scroll to be a smooth animation (rather than jump).


Delegate for handle “mainScroll” could not find a corresponding element with delegate-handle=“mainScroll”! scrollBottom() was not called!
Possible cause: If you are calling scrollBottom() immediately, and your element with delegate-handle=“mainScroll” is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollBottom() and try again.

Its not working


I’m looking at a solution that is better than:

    $timeout(function() {
        var scrollView = $ionicScrollDelegate.$getByHandle('yourHandle');
    }, 100);

Which works find on a browser, but if you happen to have an ng-repeat in your view, on a mobile device the scroll might happen before all the elements in the view are rendered. Hence not scrolling to the bottom. I’m looking for a solution but if anyone has one, please share ;-).


define a watch statemant for the object that used with repeat:

  $scope.$watch('scopeNameOfTheElementThatRepeated', function(newValue, oldValue) {
  }, true);

I recomend to disable animations in this case