如何获取溢出：隐藏或溢出：滚动div的真实.height()？

Question

我有一个关于如何获得 div 高度的问题。我知道 .height() 和 innerHeight()，但在这种情况下，它们都不能为我完成这项工作。问题是，在这种情况下，我有一个溢出宽度的 div：溢出：滚动，并且 div 具有固定的高度。

如果我使用 .height() 或 innerHeight()，它们都会给我可见区域的高度，但如果我想考虑溢出，如何我去吗？

Answer 1

使用 .scrollHeight DOM 节点的属性：$('#your_div')[0].scrollHeight

Answer 2

有关 .scrollHeight 属性的更多信息，请参阅

Element.scrollHeight只读属性是元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容。 scrollHeight 值等于元素所需的最小 clientHeight，以便在不使用垂直滚动条的情况下适应视点中的所有内容。它包括元素内边距，但不包括其边距。

Answer 3

另一种可能性是将 html 放置在屏幕“外部”的非溢出：隐藏元素中，例如绝对顶部和左侧小于 5000px 的位置，然后读取元素的高度。它很丑，但效果很好。

Answer 4

我刚刚为此制定了另一个解决方案，不再需要使用“非常高”的最大高度值。它需要几行 javascript 代码来计算折叠的 DIV 的内部高度，但之后就都是 CSS 了。

1) 获取和设置高度

获取折叠元素的内部高度（使用scrollHeight）。我的元素有一个类 .section__accordeon__content ，我实际上在 forEach() 循环中运行它来设置所有面板的高度，但你明白了。

document.querySelectorAll( '.section__accordeon__content' ).style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";

2) 使用 CSS 变量展开活动项目

接下来，当项目具有 .activemax-height 值代码>类。

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

最终示例

因此，完整的示例如下所示：首先循环遍历所有折叠面板并将其 scrollHeight 值存储为 CSS 变量。接下来使用 CSS 变量作为元素的活动/展开/打开状态的 max-height 值。

Javascript：

document.querySelectorAll( '.section__accordeon__content' ).forEach(
  function( accordeonPanel ) {
    accordeonPanel.style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
  }
);

CSS：

.section__accordeon__content {
  max-height: 0px;
  overflow: hidden;
  transition: all 425ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

就这样。仅使用 CSS 和几行 JavaScript 代码（不需要 jQuery）的自适应最大高度动画。

希望这对将来的人有帮助（或我未来的自己供参考）。

Answer 5

另一个简单的解决方案（不是很优雅，但也不太难看）是放置一个内部 div / span 然后获取他的高度 ($(this).find('span).height( ））。

以下是使用此策略的示例：

$(".more").click(function(){
if($(this).parent().find('.showMore').length) {
$(this).parent().find('.showMore').removeClass('showMore').css('max-height','90px');
$(this).parent().find('.more').removeClass('less').text('More');
} else {
$(this).parent().find('.text').addClass('showMore').css('max-height',$(this).parent().find('span').height());
$(this).parent().find('.more').addClass('less').text('Less');
}
});

* {transition: all 0.5s;}
.text {position:relative;width:400px;max-height:90px;overflow:hidden;}
.showMore {}
.text::after {
  content: "";
    position: absolute; bottom: 0; left: 0;
        box-shadow: inset 0 -26px 22px -17px #fff;
    height: 39px;
  z-index:99999;
  width:100%;
  opacity:1;
}
.showMore::after {opacity:0;}
.more {border-top:1px solid gray;width:400px;color:blue;cursor:pointer;}
.more.less {border-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="text">
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span></div>
<div class="more">More</div>
</div>

（这个具体示例使用此技巧来设置 max-height 的动画并避免折叠时的动画延迟（当对 max-height 属性使用较大的数字时）。