使用 JavaScript 滚动溢出的 DIV答案

【问题标题】：Scrolling Overflowed DIVs with JavaScript使用 JavaScript 滚动溢出的 DIV
【发布时间】：2010-09-06 00:22:34
【问题描述】：

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

到目前为止，我一直在使用这个 sn-p 来完成它（我也在使用 jQuery，因此使用了 $() 函数）：

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

但是它给了我不一致的结果。有时有效，有时无效，如果用户手动调整 div 大小或移动滚动条，它就会完全停止工作。

目标浏览器是 Firefox 3，它被部署在受控环境中，所以它根本不需要在 IE 中工作。

有什么想法吗？这个让我难住了。谢谢！

【问题讨论】：

标签： javascript jquery ajax html scroll

【解决方案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 的内容。

【讨论】：

【解决方案2】：

scrollIntoView

scrollIntoView 方法将元素滚动到视图中。

【讨论】：

【解决方案3】：

使用循环遍历一个元素的 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;

【讨论】：

不是那么低效，因为它只会迭代一次。但是，如果您要在一秒钟内运行数千次 each，您肯定会注意到每次创建函数作用域与使用 [0] 相比的开销；）

【解决方案4】：

$("#thediv").scrollTop($("#thediv")[0].scrollHeight);

【讨论】：

【解决方案5】：

可以用纯 JS 完成。诀窍是将 scrollTop 设置为等于或大于元素总高度的值 (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)。

【讨论】：

【解决方案6】：

我有一个 div 包装了 3 个向左浮动的 div，其内容正在调整大小。当您尝试解决此问题时，它有助于为 div-wrapper 打开时髦颜色的边框/背景。问题是调整后的 div 内容溢出到 div 包装器之外（并流到包装器下方的内容区域下方）。

使用上面@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 都不会产生真正的内容高度值。希望这可以帮助那里的人！

【讨论】：