使用display:none parent读取scroll的scrollHeight

Question

使用隐藏div的父级元素.divdisplay:none

• 我正在将jQuery textarea元素转储到控制台.我看到scrollHeight第0个元素的属性是88.
• 我尝试将此属性读取到var(使用$(element)[0].scrollHeight或者$(element).prop('scrollHeight')我正在获取0.

我还尝试在读取之前设置textareato position: absolute和display: blockwith jQuery,结果相同.

我该如何正确阅读该属性？

Answer 1

什么时候元素的大小是display:none多少？经过0px 0px

该元素尚未在屏幕上的任何地方渲染或绘制，因此它真正占据了零像素的空间。的问题，如果它是可见的，它多少空间会消耗是棘手的答案，因为准确地回答这意味着转向的假设变成现实。我们需要实际渲染它才能可靠地测量其大小。

一般来说，这包括：

1. 切换- 快速使元素可见，检查高度，并恢复回来

   当切换，你也许能够使人们看到和油漆周期之间撤消，但没有保证。特别是如果您要测量的元素深深嵌套在隐藏的父元素中。

2. 克隆- 尽可能模拟元素的属性并在屏幕外渲染

   当克隆，元素的尺寸是基于大量的其它元件和包围它的性质。根据页面的复杂程度，也不能保证在屏幕外创建元素会产生与原始元素完全相同的尺寸。

在以下问题中列出了几种解决方案，但大多数都遵循该基本模式：

• 需要找到隐藏 div 的高度设置为 display:none
• 获取display:none父元素内元素的大小
• 检查元素是否在 DOM 中可见

还有一个名为jQuery.Actual (2.4KB)的库，它抽象了其中的一些工作：

这是他们自己的Demo Page和Stack Snippet：

console.log("width: ", $("#inner").actual("width"))
console.log("height: ", $("#inner").actual("height"))

#outer, #inner {
  margin: 10px;
  padding: 10px;
}
#outer {
  background: #d1e3ef;
}
#inner {
  background: #9ebae9;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>

<div id="outer" style="display:none">
  <code>#outer</code>
  <div id="inner">
    <code>#inner</code>
  </div>
</div>

Answer 2

您需要为父 div 设置 dispaly:block 属性。在使用 $(element)[0].scrollHeight 获取滚动高度后，您可以将 display:none 设置为主 div。

所以你的代码将是

$('#mainDiv').show();
// Dump html to div
// Read height
var heightOfDiv = $('#mainDiv')[0].scrollHeight
// Hide the div
$('#mainDiv').hide();