使用JavaScript滚动溢出的DIV

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

到目前为止,我一直在使用这个代码片段(我也使用jQuery,因此$()函数):

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

然而,它给了我不一致的结果.有时它可以工作,有时不工作,如果用户调整div或手动移动滚动条,它就会完全停止工作.

目标浏览器是Firefox 3,它被部署在受控环境中,因此根本不需要在IE中工作.

有什么想法吗？这个让我难过.谢谢!

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内容.

scrollIntoView

该scrollIntoView方法滚动元件进入视野.

使用循环迭代一个元素的jQuery是非常低效的.选择ID时,您可以使用get()或[]表示法检索jQuery的第一个和唯一元素.

var div = $("#thediv")[0];

// 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(div.scrollHeight, div.clientHeight);
div.scrollTop = scrollHeight - div.clientHeight;