小编典典

使用JavaScript滚动溢出的DIV

ajax

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

到目前为止,我一直在使用此代码段执行此操作(我也在使用jQuery,因此使用了$()函数):

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

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

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

有想法吗?这让我感到难过。谢谢!


阅读 224

收藏
2020-07-26

共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的内容。

2020-07-26