可靠返回元件's scrollHeight而不使用`scrollHeight`属性

Reliably return element's scrollHeight without using `scrollHeight` property

本文关键字：scrollHeight 属性 返回      更新时间：2023-09-26

使用纯Javascript或jQuery，我需要获得滚动元素的全高。但是DOM属性scrollHeight显然不是100%可靠的。

我设想暂时将该项的css高度设置为auto，检查其大小，然后将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的解决方案会很有趣）。

而不是

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

尝试-

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

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

height:auto没有覆盖我的元素100%的原始样式，并且使得元件占据其所需的全部高度。

相关文章：