How to automatically scroll the bottom in AngularJS?

Question

My AngularJS application has a controller that contains a list with messages:

$scope.messages = []

This list is updated as the application launches. In the template, it is displayed as follows:

<div style="height: 200px; overflow: auto">
...
    <li ng-repeat="msg in messages">{{msg}}</li>
...

But when more messages arrive than 200px, the scroll remains at the top.

How to automatically scroll to the bottom of a message list?

Answer 1

There is a scroll-glue directive in this library https://github.com/Luegg/angularjs-scroll-glue that solves the problem.

Just add the glue scroll directive to the div:

<div style="height: 200px; overflow: auto" scroll-glue>
...