在底部加载可滚动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 /...)