How to automatically scroll to the bottom in AngularJS?

Question

In my AngularJS app there is a controller which contains a list with messages:

$scope.messages = []

This list is updated as the application runs. In the template it is rendered in the following way:

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

But when more messages comes than fits the 200px height, the scroll remains on the top.

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

ticcky · Accepted Answer · 2014-07-02 09:07:01Z

5

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

Just add scroll-glue directive to the div:

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

answered Jul 2, 2014 at 9:07

ticcky

6886 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1