Comment obtenir le vrai .height () d'un overflow: hidden ou overflow: scroll div?

J'ai une question sur la façon d'obtenir une hauteur div. Je suis au courant de .height()et innerHeight(), mais aucun d'entre eux ne fait le travail à ma place dans ce cas. Le truc, c'est que dans ce cas, j'ai un div qui déborde la largeur d'un débordement: scroll et le div a une hauteur fixe.

Si j'utilise .height()ou innerHeight(), les deux me donnent la hauteur de la zone visible, mais si je veux que le survol soit pris en compte, comment dois-je procéder?

Utilisez la .scrollHeightpropriété du nœud DOM:$('#your_div')[0].scrollHeight

Pour plus d'informations sur la .scrollHeightpropriété, reportez-vous à la documentation :

L' attribut en lecture seule Element.scrollHeight est une mesure de la hauteur du contenu d'un élément, y compris le contenu non visible à l'écran en raison d'un débordement. La valeur scrollHeight est égale au clientHeight minimum dont l'élément aurait besoin pour s'adapter à tout le contenu dans le point de vue sans utiliser une barre de défilement verticale. Il inclut le remplissage de l'élément mais pas sa marge.

Une autre possibilité serait de placer le html dans un non débordement: élément caché placé "hors" de l'écran, comme une position absolue en haut et à gauche lesse puis 5000px, puis lire cet élément en hauteur. C'est moche, mais ça marche bien.

Je viens de concocter une autre solution pour cela, où il n'est plus nécessaire d'utiliser une valeur -much to high-max-height. Il faut quelques lignes de code javascript pour calculer la hauteur intérieure du DIV réduit, mais après cela, tout est en CSS.

1) Récupération et réglage de la hauteur

Récupère la hauteur intérieure de l'élément réduit (à l'aide de scrollHeight). Mon élément a une classe .section__accordeon__contentet je l'exécute en fait dans une forEach()boucle pour définir la hauteur de tous les panneaux, mais vous voyez l'idée.

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

2) Utilisez la variable CSS pour développer l'élément actif

Ensuite, utilisez la variable CSS pour définir la max-heightvaleur lorsque l'élément a une .activeclasse.

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

Exemple final

Ainsi, l'exemple complet est le suivant: commencez par parcourir tous les panneaux d'accordéon et stockez leurs scrollHeightvaleurs sous forme de variables CSS. Ensuite, utilisez la variable CSS comme max-heightvaleur sur l'état actif / développé / ouvert de l'élément.

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

Et voila. Une animation adaptative de hauteur maximale utilisant uniquement CSS et quelques lignes de code JavaScript (aucun jQuery requis).

J'espère que cela aidera quelqu'un dans le futur (ou mon futur moi pour référence).

Pour ceux qui ne débordent pas mais se cachent par marge négative:

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

(moche mais un seul qui fonctionne jusqu'à présent)

Une autre solution simple (pas très élégante, mais pas trop moche aussi) est de placer un intérieur div / spanpuis de prendre sa hauteur ( $(this).find('span).height()).

Voici un exemple d'utilisation de cette stratégie:

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

(Cet exemple spécifique utilise cette astuce pour animer la hauteur max et éviter le retard d'animation lors de la réduction (lors de l'utilisation d'un nombre élevé pour la propriété max-height).