Wie erhalte ich die tatsächliche Höhe () eines Überlaufs: versteckt oder Überlauf: scroll div?

Ich habe eine Frage, wie man eine Div-Höhe bekommt. Ich bin mir dessen bewusst .height()und innerHeight(), aber keiner von ihnen macht den Job für mich in diesem Fall. Die Sache ist, dass ich in diesem Fall ein Div habe, dessen Breite übergelaufen ist, einen Überlauf: scrollen und das Div hat eine feste Höhe.

Wenn ich .height()oder verwende innerHeight(), geben beide die Höhe des sichtbaren Bereichs an, aber wenn ich möchte, dass der Überlauf berücksichtigt wird, wie gehe ich vor?

Verwenden Sie die .scrollHeightEigenschaft des DOM-Knotens:$('#your_div')[0].scrollHeight

Weitere Informationen zu .scrollHeightEigenschaften finden Sie in den Dokumenten :

Das schreibgeschützte Attribut Element.scrollHeight ist ein Maß für die Höhe des Inhalts eines Elements, einschließlich des Inhalts, der aufgrund eines Überlaufs nicht auf dem Bildschirm angezeigt wird. Der Wert für scrollHeight entspricht dem Mindestwert für clientHeight, den das Element benötigen würde, um den gesamten Inhalt in den Ansichtspunkt zu passen, ohne eine vertikale Bildlaufleiste zu verwenden. Es enthält die Elementauffüllung, jedoch nicht den Rand.

Eine andere Möglichkeit wäre, das HTML in einem nicht überlaufenen Element zu platzieren: verstecktes Element außerhalb des Bildschirms platziert, wie eine Position absolut oben und links weniger als 5000px, dann diese Elementhöhe lesen. Es ist hässlich, aber gut funktionieren.

Ich habe mir gerade eine andere Lösung dafür ausgedacht, bei der es nicht mehr notwendig ist, einen Wert von viel bis hoher maximaler Höhe zu verwenden. Es werden einige Zeilen Javascript-Code benötigt, um die innere Höhe des reduzierten DIV zu berechnen, aber danach ist alles CSS.

1) Abrufen und Einstellen der Höhe

Holen Sie sich die innere Höhe des reduzierten Elements (mit scrollHeight). Mein Element hat eine Klasse .section__accordeon__contentund ich führe diese tatsächlich in einer forEach()Schleife aus, um die Höhe für alle Bedienfelder festzulegen, aber Sie haben die Idee.

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

2) Verwenden Sie die CSS-Variable, um das aktive Element zu erweitern

Verwenden Sie als Nächstes die CSS-Variable, um den max-heightWert festzulegen, wenn das Element eine .activeKlasse hat.

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

Letztes Beispiel

Das vollständige Beispiel sieht also so aus: Durchlaufen Sie zuerst alle Accordeon-Panels und speichern Sie ihre scrollHeightWerte als CSS-Variablen. Verwenden Sie als Nächstes die CSS-Variable als max-heightWert für den aktiven / erweiterten / offenen Status des Elements.

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);
}

Und da hast du es. Eine adaptive Animation mit maximaler Höhe, die nur CSS und einige Zeilen JavaScript-Code verwendet (keine jQuery erforderlich).

Hoffe, dies hilft jemandem in der Zukunft (oder meinem zukünftigen Selbst als Referenz).

Für diejenigen, die nicht überlaufen, sondern sich mit negativem Abstand verstecken:

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

(hässlich, aber nur eine, die bisher funktioniert)

Eine andere einfache Lösung (nicht sehr elegant, aber auch nicht zu hässlich) besteht darin, ein Inneres zu platzieren und div / spandann seine Größe zu ermitteln ( $(this).find('span).height()).

Hier ist ein Beispiel für die Verwendung dieser Strategie:

$(".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>

(In diesem speziellen Beispiel wird dieser Trick verwendet, um die maximale Höhe zu animieren und Animationsverzögerungen beim Reduzieren zu vermeiden (wenn für die Eigenschaft "maximale Höhe" eine hohe Zahl verwendet wird).