Bagaimana cara mendapatkan nyata .tinggi () dari overflow: hidden or overflow: scroll div?

Saya punya pertanyaan tentang cara mendapatkan ketinggian div. Saya sadar .height()dan innerHeight(), tetapi tidak ada yang melakukan pekerjaan untuk saya dalam kasus ini. Masalahnya adalah bahwa dalam kasus ini saya memiliki div yang lebar overflown melimpah: gulir dan div memiliki ketinggian tetap.

Jika saya menggunakan .height()atau innerHeight(), keduanya memberi saya ketinggian area yang terlihat, tetapi jika saya ingin kelebihan muatan diperhitungkan, bagaimana cara saya melanjutkan?

Gunakan .scrollHeightproperti dari simpul DOM:$('#your_div')[0].scrollHeight

Untuk informasi lebih lanjut tentang .scrollHeightproperti, rujuk ke dokumen :

The Element.scrollHeight read-only atribut adalah pengukuran ketinggian konten elemen, termasuk konten tidak terlihat di layar karena kebanjiran. Nilai scrollHeight sama dengan client minimum. Tinggi elemen akan diperlukan agar sesuai dengan semua konten di sudut pandang tanpa menggunakan scrollbar vertikal. Ini termasuk elemen padding tetapi tidak marginnya.

Kemungkinan lain akan menempatkan html di non overflow: elemen tersembunyi ditempatkan 'keluar' dari layar, seperti posisi absolut atas dan dibiarkan kurang dari 5000px, lalu baca tinggi elemen ini. Itu jelek, tapi bekerja dengan baik.

Saya baru saja memasak solusi lain untuk ini, di mana tidak perlu lagi menggunakan nilai -much to high-max-height. Dibutuhkan beberapa baris kode javascript untuk menghitung ketinggian bagian dalam DIV yang diciutkan tetapi setelah itu, itu semua CSS.

1) Mengambil dan mengatur ketinggian

Ambil ketinggian bagian dalam elemen yang runtuh (menggunakan scrollHeight). Elemen saya memiliki kelas .section__accordeon__contentdan saya benar-benar menjalankan ini dalam satu forEach()lingkaran untuk mengatur ketinggian untuk semua panel, tetapi Anda mendapatkan ide.

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

2) Gunakan variabel CSS untuk memperluas item yang aktif

Selanjutnya, gunakan variabel CSS untuk mengatur max-heightnilai ketika item memiliki .activekelas.

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

Contoh terakhir

Jadi contoh lengkapnya seperti ini: loop pertama melalui semua panel accordeon dan menyimpan scrollHeightnilai - nilai mereka sebagai variabel CSS. Selanjutnya gunakan variabel CSS sebagai max-heightnilai pada elemen aktif / diperluas / terbuka elemen.

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

Dan begitulah. Animasi max-height adaptif yang hanya menggunakan CSS dan beberapa baris kode JavaScript (tidak diperlukan jQuery).

Semoga ini bisa membantu seseorang di masa depan (atau masa depan saya sendiri untuk referensi).

Bagi mereka yang tidak meluap tetapi bersembunyi dengan margin negatif:

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

(jelek tapi hanya satu yang bekerja sejauh ini)

Solusi sederhana lain (tidak terlalu elegan, tetapi tidak terlalu jelek juga) adalah menempatkan batin div / spankemudian mendapatkan tinggi badannya ( $(this).find('span).height()).

Berikut adalah contoh penggunaan strategi ini:

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

(Contoh khusus ini menggunakan trik ini untuk menghidupkan tinggi maks dan menghindari penundaan animasi saat runtuh (saat menggunakan angka tinggi untuk properti maks-tinggi).