ng-repeat 渲染并自动滚动到底部

Question

我正在尝试创建一些使用 ng-repeat 呈现的视图，并且每次添加元素时我希望视图滚动到底部（就像在聊天窗口中一样 - 当添加新消息时，滚动视图仍位于底部)。

我的观点由三部分组成

<div class="fixed-top">...</div> //header
<div class="content">...</div> //messages - overflow: auto; margin-bottom: 55px;
<div class="fixed-bottom">...</div> //footer - message input

这是来自开发工具的截图：

默认情况下它会滚动到顶部，我希望在 ng-repaet 完成渲染后将其滚动到底部 - 如果将向 ng-repeat 添加新元素，我希望再次滚动到底部。

我曾尝试像这样使用$anchorScroll：

$timeout(function() {
  $anchorScroll.hash("last_ng-repeat-id");
  $anchorScroll();
});

它很早就触发了，即使我尝试单击它仍然没有移动。

如果没有其他方法可以解决这个问题（首选），是否有任何 css 解决方案。

谢谢

Answer 1

你可以设置一个指令在end of ng-repeat运行，我不喜欢，或者你可以使用滚动胶https://github.com/Luegg/angularjs-scroll-glue