我有一个使用overflow:auto的div,它在调整大小并在页面中拖动时将内容保留在div中。我正在使用一些Ajax从服务器中检索文本行,然后将它们附加到div的末尾,因此内容正在向下增长。每次发生这种情况时,我都希望使用JS将div滚动到底部,以便可以看到最新添加的内容,类似于聊天室或命令行控制台的工作方式。
到目前为止,我一直在使用此代码段执行此操作(我也在使用jQuery,因此使用了$()函数):
$("#thediv").scrollTop = $("#thediv").scrollHeight;
但是,这给了我不一致的结果。有时它起作用,有时不起作用,并且如果用户曾经调整div的大小或手动移动滚动条,它将完全停止工作。
目标浏览器是Firefox 3,它已部署在受控环境中,因此根本不需要在IE中运行。
有想法吗?这让我感到难过。谢谢!
scrollHeight应该是内容的总高度。scrollTop指定该内容中要显示在元素客户区顶部的像素偏移量。
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的内容。
clientHeight