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

Posted 2023-03-06

【中文标题】如何获得溢出的真实 .height()：隐藏或溢出：滚动 div？

【英文标题】：How do I get the real .height() of a overflow: hidden or overflow: scroll div?

【发布时间】：2011-02-01 03:06:01

【问题描述】：

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

如果我使用.height() 或innerHeight()，它们都会给我可见区域的高度，但是如果我想考虑溢出，我该怎么做？

【参考方案1】：

我刚刚为此制定了另一个解决方案，不再需要使用 -much 到 high- max-height 值。它需要几行 javascript 代码来计算折叠 DIV 的内部高度，但之后，它都是 CSS。

1) 获取和设置高度

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

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

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

接下来，当项目具有 .active 类时，使用 CSS 变量设置 max-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）的自适应最大高度动画。

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

【讨论】：

这在 Chrome 中对我不起作用。在 Chrome 中，scrollHeight 的字面意思似乎是启用滚动时的高度。隐藏溢出后，scrollHeight 总是返回等于 clientHeight。

【参考方案2】：

对于那些没有溢出但被负边距隐藏的：

$('#element').height() + -parseInt($('#element').css("margin-top"));

（丑陋但目前只有一个有效）

【参考方案3】：

另一个简单的解决方案（不是很优雅，但也不太丑）是放置一个内部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>

（这个具体的例子是使用这个技巧来动画最大高度并避免折叠时的动画延迟（当对最大高度属性使用高数字时）。

【参考方案4】：

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

【讨论】：

根据comment here，.scrollHeight DOM 函数在 IE developer.mozilla.org/en/DOM/element.scrollHeight) 中不起作用

scrollHeight 有时在隐藏（或其父项被隐藏）时也会返回零，这很烦人。

更正确地使用 $('#your_div').prop('scrollHeight');

@Simon 在我的例子中它只返回元素中可见像素的数量overflow: hidden :/

纯javascript：document.getElementById('your_div').scrollHeight

【参考方案5】：

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

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

【参考方案6】：

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

【讨论】：

我不建议将它用于 SEO 问题，这对于屏幕阅读器来说可能看起来很奇怪。如果你这样做，你只需要在你阅读它的时候把 HTML 放在一个 div 中，然后用 javascript 立即删除它。但是对于这种情况，公认的答案更好