Javascript 在底部加载可滚动div

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

我知道ScrollToJS属性，但就我而言，它并不令人满意

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

在大纲中，我会选择一些接近facebook聊天窗口的东西

如果有人知道如何优雅地做到这一点，请提前感谢

编辑：

另一个限制是聊天消息是异步加载的，因此如果我只等待加载DOM，我会滚动到空div的底部，为什么不这样做：

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

---

并在每次有问题的div（

yourEl

）中添加新内容时调用它？

我不确定这是否是您要查找的内容，但是如果您的聊天窗口是一个带有overflow:scroll设置的div（与FB chat类似），如果您设置scrollTop属性，它会工作吗

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

---

我创建了一个小代码笔来演示它：

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

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

---

基于Arjun的答案，但使用滚动高度

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

---

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

哈哈，似乎我的答案来得太晚了一分钟：-DIt看起来不错，但是如果我的消息包含图像之类的资源呢。DOMContentLoaded事件不会等待它被激发。我认为加载事件在这里不起作用，因为它被触发得太早了。据我所知，scrollHeight在加载DOMContentLoaded时包含错误的值，因为图像的高度还不知道，因此浏览器会在图像完全加载后重新显示容器。您可以在加载的每个图像上使用onload来更正scrollTop位置。这似乎是使用onload图像的最佳选择它应该可以工作，但是当我加载带有分页的旧消息时，我不希望我的div被滚动到底部，所以我需要使用布尔值或其他东西来测试我的情况。如果没有其他方法，我会这样做，但如果有其他方法，我会很感激。这就是我在说“我知道scrollTo js属性，但在我的情况下它不令人满意”时所说的。我的错误是我使用了scrollTo而不是scrollTop。您建议的代码依赖于jQuery。就我所理解的Takos问题而言，他正在寻找一种非jQuery的解决方案“angularjs不带jQuery”。。