Jak uzyskać rzeczywistą .height () overflow: hidden lub overflow: scroll div?

Mam pytanie dotyczące sposobu uzyskania wysokości div. Jestem świadomy .height()i innerHeight(), ale żaden z nich nie wykonuje za mnie pracy w tym przypadku. Chodzi o to, że w tym przypadku mam div, który jest przepełniony szerokością i przepełnieniem: scroll i div ma stałą wysokość.

Jeśli używam .height()lub innerHeight()oba dają mi wysokość widocznego obszaru, ale jeśli chcę wziąć pod uwagę przelanie, jak mam się do tego zabrać?

Użyj .scrollHeightwłaściwości węzła DOM:$('#your_div')[0].scrollHeight

Więcej informacji na temat .scrollHeightnieruchomości można znaleźć w dokumentach :

Element.scrollHeight tylko do odczytu atrybut jest pomiar wysokości zawartości elementu, w tym zawartość nie jest widoczna na ekranie z powodu przepełnienia. Wartość scrollHeight jest równa minimalnemu clientHeight, którego element wymagałby, aby dopasować całą zawartość do punktu widzenia bez użycia pionowego paska przewijania. Zawiera wypełnienie elementu, ale nie jego margines.

Inną możliwością byłoby umieszczenie html w niepopełnieniu: ukryty element umieszczony „poza” ekranem, jak pozycja absolutna góra i lewo mniej niż 5000px, a następnie odczytanie wysokości tych elementów. Jest brzydki, ale działa dobrze.

Właśnie wymyśliłem dla tego inne rozwiązanie, w którym nie jest już konieczne stosowanie wartości od - dużo do dużej - maksymalnej wysokości. Potrzebuje kilku wierszy kodu javascript, aby obliczyć wewnętrzną wysokość zwiniętego DIV, ale potem wszystko to jest CSS.

1) Pobieranie i ustawianie wysokości

Pobierz wewnętrzną wysokość zwiniętego elementu (używając scrollHeight). Mój element ma klasę .section__accordeon__contenti faktycznie uruchamiam to w forEach()pętli, aby ustawić wysokość dla wszystkich paneli, ale masz pomysł.

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

2) Użyj zmiennej CSS, aby rozwinąć aktywny element

Następnie użyj zmiennej CSS, aby ustawić max-heightwartość, gdy element ma .activeklasę.

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

Ostatni przykład

Pełny przykład wygląda tak: najpierw przejrzyj wszystkie panele akordeonu i zapisz ich scrollHeightwartości jako zmienne CSS. Następnie użyj zmiennej CSS jako plikumax-height wartości stanu aktywnego / rozwiniętego / otwartego elementu.

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

I masz to. Adaptacyjna animacja o maksymalnej wysokości wykorzystująca tylko CSS i kilka wierszy kodu JavaScript (nie jest wymagana jQuery).

Mam nadzieję, że to pomoże komuś w przyszłości (lub mojej przyszłej jaźni w celach informacyjnych).

Dla tych, które nie są przepełnione, ale ukrywają się pod ujemnym marginesem:

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

(brzydki, ale jedyny, który działa jak dotąd)

Innym prostym rozwiązaniem (niezbyt eleganckim, ale też niezbyt brzydkim) jest umieszczenie wnętrza, div / spana następnie uzyskanie jego wzrostu ($(this).find('span).height() ).

Oto przykład zastosowania tej strategii:

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

(Ten konkretny przykład wykorzystuje tę sztuczkę do animowania maksymalnej wysokości i unikania opóźnienia animacji podczas zwijania (w przypadku używania dużej liczby dla właściwości max-height).