Question

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

Answer 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控制台打开的情况下运行）。

Answer 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（$（ '＃外'）scrollHeight属性。）;

你将获得Chrome，FireFox和Opera的900px。那很好。

但是，如果你将一个wheelevent / wheel事件附加到#outer，当你滚动它时，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的值。我遇到了这个问题，制作了自己的滚动窗格。希望这有助于某人。

Answer 3

我们也可以使用 -

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

Answer 4

Element.scrollHeight是一个属性，而不是一个函数，如here所述。如上所述here，仅在IE8之后支持scrollHeight属性。如果您需要它在此之前工作，请暂时将CSS overflow和height设置为auto，这将使div获得所需的最大高度。然后获得高度，并将属性更改回原来的状态。

Answer 5

您可以使用.outerHeight()获取它。

有时，它会返回0。为了获得最佳效果，您可以在div的准备活动中调用它。

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

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

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

Answer 6

使用scrollHeight不仅有错误，而且当您的容器具有硬编码高度时也不起作用（这可能是大多数情况，因为您希望在不执行container.height()的情况下获得内容高度）
@shazboticus-s-shazbot解决方案很好，当你可以暂时处理容器高度/具有硬编码高度。
另一种解决方案是：

＆＃13;

$('#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);

＆＃13;

当然，后一种选择只适用于#outer没有立即文本的孩子占用空间而你想测量的情况。那是我的2美分。

如果您想测量未打包的文字，我建议修改您的DOM树，并通过<div>

$('#outer').children().height()

如何使用jQuery获取div的完整内容的高度？

6 个答案: