在底部加载可滚动div

Question

我正在用javascript（angularjs没有jQuery）开发聊天，我想知道是否可以将可滚动的div加载到底部。

我知道scrollTo js属性，但在我的情况下它并不令人满意。

首先，看到div滚动到底部并且我使用onscroll（顶部）分页并不是一个非常好的用户体验。 因此，如果在触发滚动时我的div被加载到他的顶部，则将加载新页面。

在大纲中，我会接近Facebook聊天窗口。

如果有人知道如何以优雅的方式做到这一点，请提前感谢。

编辑：

另一个限制是聊天消息是异步加载的，所以如果我只等待加载DOM，我滚动到我的空div的底部

Answer 1

我不确定这是否是您正在寻找的，但如果您的聊天窗口是带溢出的div：滚动设置（如FB聊天），如果您设置了scrollTop属性，它会不会起作用？

这应立即设置新的滚动位置，因此您不会看到任何转换。

我创建了一个小CodePen来演示它： http ：//codepen.io/anon/pen/dpkxl

Answer 2

为什么不这样做：

var yourEl= document.getElementById("yourEl");
yourEl.scrollTop = yourEl.scrollHeight;

每次将新内容添加到相关div（ yourEl ）时调用它？

Answer 3

您可以使用它来将div滚动到底部

$("element").animate({scrollTop : $("element").height()},1);

Answer 4

基于Arjun的答案，但使用scrollHeight

$("element").animate({scrollTop : $("element")[0].scrollHeight},1);

将滚动到元素的[当前不可见]底部（div / ul / ...）