在底部加载可滚动的div

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

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

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

Layout of my screen

在外形我想一些接近Facebook的聊天窗口。

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

编辑：

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

2014-03-12 Tako

我不确定这是否是您要查找的内容，但是如果您的聊天窗口是带溢出的div：滚动集（如FB聊天），如果您设置scrollTop属性？

这应该立即设置新的滚动位置，所以你不会看到任何转换。

我创建了一个小CodePen进行论证：http://codepen.io/anon/pen/dpkxl

2014-03-12 09:24:30

哈哈，好像我的答案在一分钟后来得太迟:-D –

它看起来不错，但是如果我的消息包含像image这样的资源呢。 DOMContentLoaded事件不会等待它被触发。我[尝试加载事件，但不起作用]（http://codepen.io/anon/pen/xBAkC）。 – Tako

我认为load事件在这里不起作用，因为它太早被解雇了。据我了解问题，scrollHeight在DOMContentLoaded时间包含错误的值，因为图像的高度尚未知道，因此浏览器在图像完全加载后重新布局容器。您可以在加载的每个图像上使用onload来更正scrollTop位置。 –

为什么不：

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

，并调用它每一次新的内容添加到div的问题（yourEl）？

2014-03-12 09:23:11 SW4

它应该工作，但当我加载分页的旧消息，我不希望我的div滚动到底部，所以我需要使用布尔值或东西来测试我的情况。如果没有其他办法做到这一点，我会这样做，但如果存在另一种方式，我将不胜感激。 – Tako

，你可以用这个滚动的div底部

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

2014-03-12 09:46:54 Arjun

您建议的代码依赖于jQuery。据我了解Takos的问题，他正在寻找一个非jQuery解决方案“angularjs without jQuery”.. –

基于阿琼的答案，但使用scrollHeight属性

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

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

2014-03-20 10:23:39 Leo

这就是当我说“我知道scrollTo js属性，但在我的情况这并不令人满意。“我使用scrollTo而不是scrollTop的错误。 – Tako

回答