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ć?
.scrollHeight
funkcja DOM nie działa w IE <8,0 ( developer.mozilla.org/en/DOM/element.scrollHeight )scrollHeight
irytująco czasami zwraca zero, gdy jest ukryty (lub jego rodzic jest ukryty).overflow: hidden
: /document.getElementById('your_div').scrollHeight
Więcej informacji na temat
.scrollHeight
nieruchomości można znaleźć w dokumentach :źródło
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.
źródło
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__content
i faktycznie uruchamiam to wforEach()
pętli, aby ustawić wysokość dla wszystkich paneli, ale masz pomysł.2) Użyj zmiennej CSS, aby rozwinąć aktywny element
Następnie użyj zmiennej CSS, aby ustawić
max-height
wartość, gdy element ma.active
klasę.Ostatni przykład
Pełny przykład wygląda tak: najpierw przejrzyj wszystkie panele akordeonu i zapisz ich
scrollHeight
wartości jako zmienne CSS. Następnie użyj zmiennej CSS jako plikumax-height
wartości stanu aktywnego / rozwiniętego / otwartego elementu.JavaScript:
CSS:
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).
źródło
Dla tych, które nie są przepełnione, ale ukrywają się pod ujemnym marginesem:
(brzydki, ale jedyny, który działa jak dotąd)
źródło
Innym prostym rozwiązaniem (niezbyt eleganckim, ale też niezbyt brzydkim) jest umieszczenie wnętrza,
div / span
a następnie uzyskanie jego wzrostu ($(this).find('span).height()
).Oto przykład zastosowania tej strategii:
(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).
źródło