在底部加载可滚动的 div答案

【问题标题】：Load scrollable div at bottom在底部加载可滚动的 div
【发布时间】：2014-04-16 05:58:31
【问题描述】：

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

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

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

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

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

编辑：

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

【问题讨论】：

【解决方案1】：

我不确定这是否是您要查找的内容，但如果您的聊天窗口是一个带有溢出的 div：滚动集（如 FB 聊天），那么如果您设置了 scrollTop 属性，它不会起作用吗？

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

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

【讨论】：

哈哈，看来我的回答来得太晚了：-D
看起来不错，但是如果我的消息中包含图像之类的资源呢？ DOMContentLoaded 事件不会等待它被触发。我tried with the load event but doesn't work.
我认为 load 事件在这里不起作用，因为它被触发得太早了。据我了解这个问题，scrollHeight 在 DOMContentLoaded 时间包含错误的值，因为图像的高度尚不清楚，因此浏览器在图像完全加载后重新布局容器。您可以在加载的每个图像上使用 onload 来更正 scrollTop 位置。
这似乎是使用加载图像的最佳选择

【解决方案2】：

为什么不这样做：

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

并在每次将新内容添加到相关 div (yourEl) 时调用它？

【讨论】：

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

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

基于 Arjun 的回答，但使用 scrollHeight

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

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

【讨论】：

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