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

【问题标题】：Reliably return element's scrollHeight without using `scrollHeight` property在不使用 `scrollHeight` 属性的情况下可靠地返回元素的 scrollHeight
【发布时间】：2013-07-16 10:33:37
【问题描述】：

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

我设想暂时给项目一个 css 高度 auto，检查它的大小，然后将 css 返回到它的先前值（这本身就有问题——我如何获得 css height:100% 而不是 @ 987654325@ 像 jQuery .css('height') 将返回）。但后来我发现，由于 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 的解决方案会很有趣）。

【问题讨论】：

IE 6 和 7 ？甚至 Google（是的，甚至在白色的起始页上 :)）也放弃了对这两个家伙的支持
你能提供一个 jsfiddle 来重现你的问题吗？
@RokoC.Buljan 这是一个很好的观点。我自己的公司在去年才离开 IE7……所以这就是为什么我想知道如何支持它，即使它在野外变得稀缺。但我会更新问题以反映这一点。
@roasted 我想应该总是这样做——我通常这样做！并且它会显示问题，因为该元素具有绝对定位的祖先，并设置了 overflow 属性，以防止它占据其全部高度。请给我一些时间来更新我的问题...
@roasted 请查看已接受答案中的 cmets，这将解释调查结果。你是 100% 正确的，设置一个示例会迫使我在剥离它时仔细检查所有 CSS。

标签： javascript jquery css height

【解决方案1】：

代替

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

试试-

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

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

height:auto 不会覆盖我元素的原始样式 100% 和使元素占据其所需的全部高度。

【讨论】：

嗯，这确实表明问题出在哪里。由于祖先元素绝对定位于 height 和 overflow 值，这会阻止子元素占据其全部高度，因此即使您更新的建议也不起作用。很抱歉留下了这些信息。一个 jsfiddle 会是个好主意。
所以使用.css('height', 'auto') 就可以了。不过，您的建议非常好，并为我指明了正确的方向：一些预先存在的风格阻止了 auto 做任何事情。那种风格是bottom: 0; top: 0，甚至不需要。我很抱歉浪费了您的时间，但这并不是真正的浪费——到目前为止，您获得了 35 次代表并帮助我解决了我的问题，而且我学到了一些东西。谢谢！
@ErikE 谢谢，很高兴我能帮上忙 :~)