使用JavaScript滚动溢出的DIV

Question

我有一个使用overflow：auto的div，它在调整大小并在页面中拖动时将内容保留在div中。我正在使用一些Ajax从服务器中检索文本行，然后将它们附加到div的末尾，因此内容正在向下增长。每次发生这种情况时，我都希望使用JS将div滚动到底部，以便可以看到最新添加的内容，类似于聊天室或命令行控制台的工作方式。

到目前为止，我一直在使用此代码段执行此操作（我也在使用jQuery，因此使用了$（）函数）：

$("#thediv").scrollTop = $("#thediv").scrollHeight;

但是，这给了我不一致的结果。有时它起作用，有时不起作用，并且如果用户曾经调整div的大小或手动移动滚动条，它将完全停止工作。

目标浏览器是Firefox 3，它已部署在受控环境中，因此根本不需要在IE中运行。

有想法吗？这让我感到难过。谢谢！

Answer 1

scrollHeight应该是内容的总高度。scrollTop指定该内容中要显示在元素客户区顶部的像素偏移量。

所以，您真的想要（仍然使用jQuery）：

$("#thediv").each( function() 
{
   // certain browsers have a bug such that scrollHeight is too small
   // when content does not fill the client area of the element
   var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
   this.scrollTop = scrollHeight - this.clientHeight;
});

…这会将滚动偏移量设置为最新clientHeight的内容。