Come ottengo il reale .height () di un overflow: hidden o overflow: scroll div?

Ho una domanda su come ottenere un’altezza div. Sono a conoscenza di .height() e innerHeight() , ma nessuno di loro fa il lavoro per me in questo caso. Il fatto è che in questo caso ho un div che è overflow di larghezza un overflow: scroll e il div ha un’altezza fissa.

Se uso .height() o innerHeight() , entrambi mi danno l’altezza dell’area visibile, ma se voglio che il sorvolo sia preso in considerazione, come faccio?

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

Per ulteriori informazioni sulla proprietà .scrollHeight , fare riferimento ai documenti :

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

Un’altra possibilità sarebbe posizionare l’html in un non overflow: elemento nascosto posto “fuori” dallo schermo, come una posizione assoluta in alto e left lesse quindi 5000px, quindi leggere questa altezza degli elementi. È brutto, ma funziona bene.

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

Ecco un esempio di utilizzo 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; } 
  
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.
More