オーバーフローの実際の.height（）をどのように取得しますか：非表示またはオーバーフロー：スクロールdiv？

divの高さを取得する方法について質問があります。私はの承知している.height()とinnerHeight()、それらのどれもが、この場合、私のために仕事をしません。実は、この場合、オーバーフロー幅のオーバーフローを持つdivがあります。スクロールし、divの高さが固定されています。

.height()またはを使用するとinnerHeight()、両方とも表示領域の高さがわかりますが、オーバーフローを考慮に入れるにはどうすればよいですか？

.scrollHeightDOMノードのプロパティを使用します。$('#your_div')[0].scrollHeight

.scrollHeightプロパティの詳細については、ドキュメントを参照してください。

Element.scrollHeight読み取り専用属性が原因オーバーフローに画面に表示されないコンテンツを含む要素の内容の高さの測定値です。scrollHeight値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポイントに合わせるために要素が必要とする最小のclientHeightに等しくなります。要素のパディングは含まれますが、マージンは含まれません。

その他の可能性は、htmlを画面の「外」に配置された非オーバーフローの非表示要素に配置することです。たとえば、絶対的な上部の位置と5000px未満の位置を配置し、この要素の高さを読み取ります。その醜いが、うまく機能します。

私はこのための別のソリューションを準備しました。そこでは-muchからhigh- max-heightの値を使用する必要がなくなりました。折りたたまれたDIVの内側の高さを計算するには、数行のJavaScriptコードが必要ですが、その後はすべてCSSになります。

1）高さの取得と設定

折りたたまれた要素の内側の高さを取得します（を使用scrollHeight）。私の要素にはクラスが.section__accordeon__contentあり、実際にこれをforEach()ループで実行してすべてのパネルの高さを設定しますが、アイデアはわかります。

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

2）CSS変数を使用してアクティブなアイテムを展開します

次に、CSS変数を使用してmax-height、アイテムに.activeクラスがある場合の値を設定します。

.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は不要）。

これが将来の誰か（または参考のために私の将来の自分）を助けることを願っています。

オーバーフローしていないがマイナスのマージンで隠れている場合：

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

（醜いが、これまでに機能するのは1つだけ）

別の簡単な解決策（あまりエレガントではないが、見苦しくない）は、インナーを配置し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プロパティに高い数値を使用している場合）。