如何得到溢出的实际. height () : 隐藏的或溢出的: 滚动 div？

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

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

137302 次浏览
小开
最佳答案

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

小开

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

小开

有关 .scrollHeight属性的详细信息，请参阅 医生:

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

小开

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

(这个特定的例子是使用这个技巧来动画的最大高度和避免动画延迟时崩溃(当使用高数字的最大高度属性)。

小开

对于那些没有溢出，而是隐藏在负边缘的企业:

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

(丑陋的，但只有一个工作到目前为止)

小开

我刚刚为此设计了另一个解决方案，不再需要使用-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)的自适应最大高度动画。

希望这对将来的某人有所帮助(或者对将来的我有所帮助)。


提交答案