Come posso ottenere il vero .height () di un overflow: nascosto o overflow: scroll div?

Ho una domanda su come ottenere un'altezza div. Ne sono consapevole .height()e innerHeight(), in questo caso, nessuno di loro fa il lavoro per me. Il fatto è che in questo caso ho un div che è troppo pieno e uno troppo pieno: scorri e il div ha un'altezza fissa.

Se uso .height()o innerHeight(), entrambi mi danno l'altezza dell'area visibile, ma se voglio che l'overflow sia preso in considerazione, come posso fare?

Utilizzare la .scrollHeightproprietà del nodo DOM:$('#your_div')[0].scrollHeight

Per ulteriori informazioni sulla .scrollHeightproprietà, consultare la documentazione :

L' attributo Element.scrollHeight di sola lettura è una misurazione dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore scrollHeight è uguale al clientHeight minimo richiesto dall'elemento per adattare tutto il contenuto nel punto di vista senza utilizzare una barra di scorrimento verticale. Include il padding dell'elemento ma non il suo margine.

Altra possibilità sarebbe posizionare l'html in un non overflow: elemento nascosto posizionato 'fuori' dallo schermo, come una posizione assoluta in alto e sinistra lesse quindi 5000px, quindi leggere l'altezza di questi elementi. È brutto, ma funziona bene.

Ho appena preparato un'altra soluzione per questo, in cui non è più necessario utilizzare un valore da molto alto a massimo. Ha bisogno di alcune righe di codice javascript per calcolare l'altezza interna del DIV compresso ma dopo tutto, è tutto CSS.

1) Recupero e impostazione dell'altezza

Ottieni l'altezza interna dell'elemento compresso (usando scrollHeight). Il mio elemento ha una classe .section__accordeon__contente lo eseguo effettivamente in un forEach()ciclo per impostare l'altezza per tutti i pannelli, ma hai l'idea.

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

2) Utilizzare la variabile CSS per espandere l'elemento attivo

Quindi, utilizzare la variabile CSS per impostare il max-heightvalore quando l'elemento ha una .activeclasse.

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

Esempio finale

Quindi l'esempio completo è il seguente: esegui il primo ciclo attraverso tutti i pannelli di accordeon e memorizza i loro scrollHeightvalori come variabili CSS. Quindi utilizzare la variabile CSS come max-heightvalore sullo stato attivo / espanso / aperto dell'elemento.

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

E il gioco è fatto. Un'animazione adattiva di altezza massima che utilizza solo CSS e alcune righe di codice JavaScript (non è richiesto jQuery).

Spero che questo aiuti qualcuno in futuro (o il mio io futuro per riferimento).

Per quelli che non stanno traboccando ma si nascondono con un margine negativo:

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

(brutto ma solo uno che funziona finora)

Un'altra soluzione semplice (non molto elegante, ma anche non troppo brutta) è quella di posizionare un interno div / spanquindi ottenere la sua altezza ( $(this).find('span).height()).

Ecco un esempio dell'uso di questa strategia:

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

(Questo esempio specifico sta usando questo trucco per animare l'altezza massima ed evitare il ritardo dell'animazione durante il collasso (quando si utilizza un numero elevato per la proprietà altezza massima).