将 div onload 滚动到底部，以及使用新数据更新时 - angularjs答案

【问题标题】：Scroll div onload to bottom, as well as when updated with new data - angularjs将 div onload 滚动到底部，以及使用新数据更新时 - angularjs
【发布时间】：2014-09-17 10:40:02
【问题描述】：

我想从根本上重新创建 iPhone 的“消息”应用程序的行为，使用 Angularjs（或任何其他 js）以 webapp 形式。我有一个包含我所有消息的 div，然后每条消息也是一个很好控制的元素。当用户加载消息指令时，我希望 div 容器基本上加载在底部，然后当新消息进入容器时，我希望 div 自动滚动到底部。

到目前为止，我能想到的最好的事情是：

window.setInterval(function() {
   var elem = document.getElementById('data');
   elem.scrollTop = elem.scrollHeight;
}, 4000);

我使用的是 Angular，所以任何东西都会很好，但我尝试/发现的所有东西似乎都有些老套，并且无法完全复制与“消息”应用程序相同的行为。

编辑：

我也试过

$scope.$watch('messages',function(){
    console.log('messages changed')
    var elem = document.getElementById('messageDiv');
    elem.scrollTop = elem.scrollHeight;
});

这里令人沮丧的是，这在加载时不起作用，另外，如果我在 Chrome 的开发者控制台中执行该功能，它会自动滚动到底部！

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

最终，这里的解决方案是使用 $timeout，一定要注入它......

 $timeout(function(){ $("#messageDiv").scrollTop($("#messageDiv")[0].scrollHeight);}, 10);

这允许在指令向用户“显示”时发生操作，而不是在加载页面时发生。

【讨论】：

【解决方案2】：

您应该查看您的消息集合，而不是每 4 秒向下滚动一次（前提是您的消息集合绑定到范围）：

$scope.$watch( 'messages', function(after, before) {
    // You want to encapsulate your DOM logic inside a service
    // Later, modify it to display some smooth animation
    scrollToBottom();
} );

【讨论】：

检查我的编辑，所以我尝试了这个 - 基本上那个函数没有被调用或者它只是不工作？完全没有错误，我也可以在 Chrome 的控制台中执行该功能，它会滚动...混乱！
也许这与我使用指令有关，并且消息窗口本身在用户单击打开它之前不会可见，并且由于某种原因不会触发他们什么时候加载？
您确定您的消息已绑定到范围吗？例如你在某个地方$scope.messages = messages 吗？因为$scope.$watch() 看起来范围变量的变化
是的，在此之前我有$scope.messages = Convos.getMessages(); - 这基本上就是你所说的
好的，我认为你在修改角度力学之外的messages。当模型发生变化时，Angular 会自动刷新视图。但是对于我处理的这些更改，必须触发一个摘要循环。例如，当您调用 $timeout 时，Angular 会启动一个摘要。但是当您使用 setTimeout 时，它在角度之外，因此没有摘要并且视图不会刷新。您可以查看“角度摘要循环”以了解有关此过程的更多信息。