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

Question

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

Answer 1

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控制台打开的情况下运行).

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是一个属性,而不是一个函数,注意这里.如前所述这里的scrollHeight属性属性仅IE8后支持.如果你需要它之前的工作,临时设置的CSS overflow和height到auto,这将导致div来把它需要的最大高度.然后获得高度,并将属性更改回之前的属性.