如何使用 jQuery 获取 div 全部内容的高度？

Posted 2023-03-06

【中文标题】如何使用 jQuery 获取 div 全部内容的高度？

【英文标题】：How do I get the height of a div's full content with jQuery?

【发布时间】：2011-10-14 18:16:42

【问题描述】：

我正在尝试创建自己的滚动条。我已经尝试了大多数 jquery 滚动条插件，但它们似乎都不适合我，所以我决定创建自己的。我有一个带有可滚动内容的溢出区域。如果我能够计算出可滚动内容区域的高度，我可以让滚动条工作。我已经尝试过 .scrollHeight() 并且浏览器甚至无法识别它。溢出区域有一个固定的位置。

【参考方案1】：

scrollHeight is a property 的 DOM object，不是函数：

元素滚动视图的高度；它包括元素内边距，但不包括边距。

鉴于此：

<div id="x" style="height: 100px; overflow: hidden;">
    <div style="height: 200px;">
        pancakes
    </div>
</div>

这产生 200：

$('#x')[0].scrollHeight

例如：http://jsfiddle.net/ambiguous/u69kQ/2/（在 javascript 控制台打开的情况下运行）。

【讨论】：

在我读到关于 scrollHeight 的每一个地方，都没有人说过需要 [0] 并且 scrollheight 不是一个函数。我假设，在尝试这个之后，我得到了正确的高度。在我实现滚动条的计算之前，我不会知道。但是，你得到了积分。谢谢！

@mtlca401：您需要[0] 从 jQuery 对象中提取底层 DOM 对象，这为您提供与document.getElementById() 相同的功能。你也可以使用jQuery的get函数。

我在 chrome 中得到 4260px，在 Firefox 中得到 4300px，但我假设这可能是因为填充？这是正确的吗？

@mtlca401：可能有很多东西（边距、填充、行高、字体渲染差异……），~1% 的差异并没有那么大。

如果你想要实际的 scrollTop 高度，你需要 scrollLength = $('#x')[0].scrollHeight - $('#x').height();

【参考方案2】：

如果您能帮上忙，请勿使用 .scrollHeight。

.scrollHeight 在某些情况下（在滚动时最显着）在不同浏览器中不会产生相同类型的结果。

例如：

<div id='outer' style='width:100px; height:350px; overflow-y:hidden;'>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
</div>

如果你这样做了

console.log($('#outer').scrollHeight);

您将在 Chrome、FireFox 和 Opera 中获得 900 像素。太好了。

但是，如果你在#outer 上附加了一个wheelevent / wheel 事件，当你滚动它时，Chrome 会给你一个900px 的常量值（正确），但是FireFox 和Opera 会将它们的值更改为你向下滚动（不正确）。

一个非常简单的方法就是这样（有点作弊，真的）。 （此示例在向#outer 动态添加内容时也有效）：

$('#outer').css("height", "auto");
var outerContentsHeight = $('#outer').height();
$('#outer').css("height", "350px");

console.log(outerContentsHeight); //Should get 900px in these 3 browsers

我选择这三个浏览器的原因是因为在某些情况下，这三个浏览器都可能不同意 .scrollHeight 的值。我在制作自己的滚动窗格时遇到了这个问题。希望这对某人有所帮助。

【讨论】：

既然 scrollHeight 是一个 DOM 属性，你不应该改用 $('#outer').get(0).scrollHeight 吗？

【参考方案3】：

我们也可以使用 -

$('#x').prop('scrollHeight') <!-- Height -->
$('#x').prop('scrollWidth')  <!-- Width -->

【参考方案4】：

Element.scrollHeight 是属性，而不是函数，如 here 所述。如here 所述，仅在 IE8 之后才支持 scrollHeight 属性。如果您需要它在此之前工作，请将 CSS overflow 和 height 临时设置为 auto，这将导致 div 占据它所需的最大高度。然后获取高度，并将属性改回原来的样子。

【讨论】：

developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight 说 IE 8 是它支持的最低版本，所以应该是“IE7 之后”或“IE8 及更高版本”

【参考方案5】：

您可以通过.outerHeight() 获取它。

有时，它会返回0。为获得最佳结果，您可以在 div 的就绪事件中调用它。

为了安全起见，您不应将div 的高度设置为x。您可以保持其高度 auto 以使用正确的高度正确填充内容。

$('#x').ready( function()
// alerts the height in pixels
alert($('#x').outerHeight());
)

你可以找到详细的帖子here。

【参考方案6】：

使用scrollHeight 不仅有问题，而且当您的容器具有硬编码的高度时（这可能是大多数情况下，因为您想在不使用container.height() 本身的情况下获得内容高度）时也不起作用 @shazboticus-s-shazbot 解决方案很好，因为您可以临时调整容器高度/使用硬编码高度。 另一种解决方案是：

$('#outer')
    // Get children in array format, as we'll be reducing them into a single number
    .contents().toArray()
    // Filter out text and comment nodes, only allowing tags
    .filter(el => el.nodeType === 1)
    // Sum up all the children individual heights
    .reduce((accumulator, el) => $(el).outerHeight(true) + accumulator, 0);

当然，后一种选择仅在#outer 没有占用空间且您想要测量的直接文本子项时才有效。这是我的 2 美分。

如果你想测量展开的文本，我建议修改你的 DOM 树并有一个内部 <div>，你可以通过 $('#outer').children().height() 轻松测量它