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

ionic-v1
1

@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?

2

T_T anybody here???

3

Thanks to @maxlynch for the solution:

controller('MyCtrl', function($scope, $ionicScrollDelegate) {
  // When something happens
  $ionicScrollDelegate.scrollBottom();
});

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

HTML:

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

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

JS:

.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 
    $ionicScrollDelegate.scrollBottom();
  };
});
1 Like
4

Just a comment, you may want to use

$ionicScrollDelegate.scrollBottom(true);

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

5

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

6

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

    $timeout(function() {
        var scrollView = $ionicScrollDelegate.$getByHandle('yourHandle');
        scrollView.scrollBottom();
    }, 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 ;-).

7

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

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

I recomend to disable animations in this case