如何通过jQuery获得div的全部内容的高度？
我正在尝试创build自己的滚动条。 我已经尝试了大部分的jQuery滚动条插件，他们都没有为我工作，所以我决定创build自己的。 我有一个可滚动内容的溢出区域。 如果我能够弄清楚可滚动内容区域的高度，我可以让滚动条工作。 我试过.scrollHeight（），浏览器甚至不认识它。 溢stream区有一个固定的位置。
scrollHeight是 DOM对象 的属性 ，而不是函数：
元素的滚动视图的高度; 它包括元素填充但不包含其边距。
鉴于这种：
<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 。
.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浏览器时，Chrome将为您提供900px的固定值（正确），但是当您向下滚动（不正确）时，FireFox和Opera将更改它们的值。
一个非常简单的方法是这样的（真的有点作弊）。 （这个例子在将内容dynamic添加到#outer的同时工作）：
$('#outer').css("height", "auto"); var outerContentsHeight = $('#outer').height(); $('#outer').css("height", "350px"); console.log(outerContentsHeight); //Should get 900px in these 3 browsers
我select这三个浏览器的原因是因为在某些情况下，三个浏览器都可能不同意.scrollHeight的值。 我遇到了这个问题，使我自己的scrollpanes。 希望这有助于某人。
我们也可以使用 –
$('#x').prop('scrollHeight') <!-- Height --> $('#x').prop('scrollWidth') <!-- Width -->
Element.scrollHeight是一个属性，而不是一个函数，如这里所述 。 如此处所述，scrollHeight属性仅在IE8之后受支持。 如果你之前需要它的话，暂时把CSS overflow和height为auto ，这会使div达到所需的最大高度。 然后获得高度，并将属性改回原来的状态。
你可以用.outerHeight()来得到它。
有时候，它会返回0 。 为了获得最好的结果，你可以在你的div准备好的事件中调用它。
为了安全起见，您不应该将div的高度设置为x 。 您可以保持其高度auto获得正确的高度填充内容。
$('#x').ready( function(){ // alerts the height in pixels alert($('#x').outerHeight()); })
你可以在这里find一个详细的post。
- 使用
scrollHeight不仅是越野车，而且当你的容器有一个硬编码的高度时（这可能是大多数情况下，因为你想获得内容的高度，而不是做container.height()本身） - @ shazboticus-s-shazbot解决scheme是很好的，当你可以暂时混乱的容器高度/有一个硬编码的高度。
- 另一种解决scheme是：
$('#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);
