javascript - 在不使用 `scrollHeight` 属性的情况下可靠地返回元素的 scrollHeight

Question

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

我设想暂时给元素一个 auto 的 css 高度，检查它的大小，然后将 css 返回到它之前的值(它本身有问题——我如何获得 css height:100% 而不是像 jQuery .css('height') 那样的 height:1012px 将返回)。但后来我发现，由于 jQuery 将 css 样式直接应用于元素的方式，只需应用样式 '' 即可将其返回到其正常的样式表声明值，所以理论上我可以这样做:

$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;
   );
}

Math.max($el[0].scrollHeight, $el.height()) 的一些工作也可能有用...

这是个糟糕的主意吗？我不可能是唯一一个需要知道 DOM 元素的 scrollHeight 并确保它可靠、不会随着元素滚动而改变、并且在所有主要浏览器中工作的人，以及IE 8(尽管了解 IE 6 和 7 的解决方案会很有趣)。

Answer 1

代替

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

尝试-

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

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

height:auto isn't overriding my element's original style of 100% and making the element take up its full desired height.