Reputation: 688
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?
Upvotes: 5
Views: 9070
Reputation: 688
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>
...
Upvotes: 5