使用JavaScript滚动溢出的DIV
56696 观看
6回复
5606 作者的声誉
我有一个div使用overflow:auto来保持div内的内容,因为它被调整大小并在页面上拖动。我正在使用一些ajax从服务器检索文本行,然后将它们附加到div的末尾,因此内容正在向下增长。每次发生这种情况时,我都希望使用JS将div滚动到底部,以便最近添加的内容可见,类似于聊天室或命令行控制台的工作方式。
到目前为止,我一直在使用这个代码片段(我也使用jQuery,因此$()函数):
$("#thediv").scrollTop = $("#thediv").scrollHeight;
然而,它给了我不一致的结果。有时它可以工作,有时不工作,如果用户调整div或手动移动滚动条,它就会完全停止工作。
目标浏览器是Firefox 3,它被部署在受控环境中,因此根本不需要在IE中工作。
有什么想法吗?这个让我难过。谢谢!
作者: Bob Somers 的来源 发布者: 2008 年 8 月 16 日回应 6
43像
130105 作者的声誉
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
内容。
6像
28070 作者的声誉
使用循环迭代一个元素的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;
作者: Vincent Robert
发布者: 2008 年 8 月 18 日
29像
91206 作者的声誉
4像
41 作者的声誉
-1像
1711 作者的声誉
我有一个包含3个div的div,它们左侧浮动,其内容正在调整大小。当您尝试解决此问题时,它有助于为div-wrapper打开时髦的边框/背景。问题是调整大小的div-content在div-wrapper之外溢出(并且流到包装器下面的内容区域下面)。
通过使用@ Shog9的答案解决了上述问题。适用于我的情况,这是HTML布局:
<div id="div-wrapper">
<div class="left-div"></div>
<div id="div-content" class="middle-div">
Some short/sweet content that will be elongated by Jquery.
</div>
<div class="right-div"></div>
</div>
这是我调整div-wrapper大小的jQuery:
<script>
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content");
//now I need to resize the div...
var contentHeight = $('#div-content').prop('scrollHeight')
$("#div-wrapper").height(contentHeight);
</script>
要注意,$('#div-content')。prop('scrollHeight')生成包装器需要调整大小的高度。另外我不知道有任何其他方法来获取scrollHeight一个实际的jQuery函数; $('#div-content')。scrollTop()和$('#div-content')。height都不会产生实际的内容高度值。希望这有助于那里的人!
作者: ObjectiveTC 发布者: 2013 年 10 月 25 日0像
3221 作者的声誉
它可以在普通的JS中完成。诀窍是将scrollTop设置为等于或大于element(scrollHeight
)的总高度的值:
const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);
来自MDN:
如果设置为大于元素可用的最大值,则scrollTop将自身设置为最大值。
虽然Math.pow(10, 10)
使用太高的值Infintiy
或者Number.MAX_VALUE
将scrollTop重置为0
(Firefox 66)的诀窍的价值。
来自类别的问题 :
- javascript 如何检测网页中使用了哪一个定义的字体?
- javascript JavaScript对象的长度
- javascript 从下拉框中获取文本
- javascript 带隐藏按钮的登录脚本
- jquery 使用JavaScript滚动溢出的DIV
- jquery 使用jQuery转义HTML字符串
- jquery 如何将html实体与jQuery进行比较
- jquery jQuery是否存在“存在”功能?
- ajax 有什么方法可以将数据从Web服务器推送到浏览器?
- ajax 如何从JQuery中的模态对话框中获取结果
- ajax How can I suppress the browser's authentication dialog?
- html 如何为我的网站提供iPhone的图标?
- html 如何在Web表单字段/输入标记上禁用浏览器自动完成?
- html 如何使用Prototype自动调整textarea?
- scroll 在用户向下滚动时加载内容
- scroll 将WPF Listview滚动到特定行
- scroll 滚动后检查元素是否可见