angularjs - 如何在 AngularJS 中自动滚动到底部？

Question

在我的 AngularJS 应用程序中，有一个包含消息列表的 Controller :

$scope.messages = []

此列表会随着应用程序运行而更新。在模板中，它以以下方式呈现:

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

但是当更多的消息超过 200 像素的高度时，滚动会保持在顶部。

如何自动滚动到消息列表底部？

Answer 1

这个库 https://github.com/Luegg/angularjs-scroll-glue 中有一个指令“scroll-glue”可以解决这个问题。

只需将 scroll-glue 指令添加到 div 中:

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