可靠地返回元素的scrollHeight而不使用`scrollHeight`属性

时间:2013-07-17 18:11:03

标签: javascript jquery css height

使用普通的Javascript或jQuery,我需要获得滚动元素的完整高度。但DOM属性scrollHeight is apparently not 100% reliable

我想要暂时给项目css高度auto,检查它的大小,然后将css返回到它的先前值(它本身有问题 - 如何获得css {{1}而不是像{jQuery height:100%那样返回height:1012px。但后来我发现由于jQuery将css样式直接应用于元素的方式,简单地应用样式.css('height')将其返回到其正常的样式表声明值,因此理论上我可以这样做:

''

但这不起作用。 $el.css('height', 'auto'); scrollHeight = $el.height(); $el.css('height', ''); 并未覆盖我元素的原始样式height:auto,并使元素占据其所需的完整高度。

所以现在我正在考虑以下几点:使用第一个子元素顶部的位置和最后一个子元素底部的位置来获得高度。 (如果需要,我可以调整填充和边距,这只是一个概念证明。)

100%

function scrollHeight($el) { var lastEl = $el.children(':last'); return ( lastEl.position().top + lastEl.height() - $el.children(':first').position().top; ); } 的某些人也可能有用......

这是一个糟糕的主意吗?我不可能是唯一一个需要知道DOM元素的Math.max($el[0].scrollHeight, $el.height())并让它可靠,不随项目滚动而改变,并且在所有主流浏览器以及IE 8中工作的人(虽然知道IE 6& 7的解决方案会很有趣。

1 个答案:

答案 0 :(得分:6)

而不是

$el.css('height', 'auto');

尝试 -

$el.attr('style', 'height: auto !important');

我提到尝试这个因为你说 -

  

高度:auto不会覆盖我元素的原始样式100%和   使元素占据其理想的高度。