Bir taşma: gizli veya taşma: kaydırma divının gerçek .height () değerini nasıl alabilirim?

Bir div yüksekliği nasıl elde edileceğim hakkında bir sorum var. Biliyorum .height()ve innerHeight()bu durumda hiçbiri benim için iş yapmıyor. Şey, bu durumda taşma genişliği bir taşma olan bir div var: kaydırma ve div sabit bir yüksekliğe sahip olmasıdır.

.height()Veya kullanırsam innerHeight(), her ikisi de bana görünür alanın yüksekliğini verir, ancak taşmanın hesaba katılmasını istersem, nasıl devam edeceğim?

.scrollHeightDOM düğümünün özelliğini kullanın :$('#your_div')[0].scrollHeight

.scrollHeightMülk hakkında daha fazla bilgi için dokümanlara bakın :

Element.scrollHeight salt okunur özniteliği nedeniyle taşma için ekranda görünmez içerik dahil bir elemanın içeriğinin yüksekliğinin bir ölçümüdür. ScrollHeight değeri, dikey kaydırma çubuğu kullanmadan görünüm içeriğindeki tüm içeriği sığdırmak için öğenin gerektireceği minimum clientHeight değerine eşittir. Öğe dolgusunu içerir ancak kenar boşluğunu içermez.

Diğer olasılık html'yi taşma olmayan bir yere yerleştirmek olacaktır: mutlak üst ve sol kiracı sonra 5000 piksel konum gibi ekranın dışına yerleştirilen gizli eleman, daha sonra bu elemanların yüksekliğini okuyun. Bu çirkin, ama iyi çalışıyor.

Bunun için başka bir çözüm hazırladım, artık bir -much-yüksek-yüksek-değer değeri kullanmanın artık gerekli olmadığı. Daraltılmış DIV'nin iç yüksekliğini hesaplamak için birkaç satır javascript kodu gerekir, ancak bundan sonra hepsi CSS'dir.

1) Getirme ve yükseklik ayarlama

Daraltılmış öğenin iç yüksekliğini (kullanarak scrollHeight) getirin. Öğemin bir sınıfı var .section__accordeon__contentve bunu forEach()tüm paneller için yüksekliği ayarlamak için bir döngüde çalıştırıyorum , ancak fikri anlıyorsunuz.

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

2) Etkin öğeyi genişletmek için CSS değişkenini kullanın

Ardından, max-heightöğenin bir .activesınıfı olduğunda değeri ayarlamak için CSS değişkenini kullanın .

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

Son örnek

Yani tam örnek şu şekildedir: ilk önce tüm akordeon paneller arasında döngü yapın ve scrollHeightdeğerlerini CSS değişkenleri olarak saklayın . Ardından max-height, öğenin etkin / genişletilmiş / açık durumundaki değer olarak CSS değişkenini kullanın .

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

İşte buyur. Yalnızca CSS ve birkaç satır JavaScript kodu kullanan uyarlanabilir bir maksimum yükseklik animasyonu (jQuery gerekmez).

Umarım bu gelecekte birine (veya referans için gelecekteki kendime) yardımcı olur.

Taşmayan ancak negatif marjla saklananlar için:

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

(çirkin ama şimdiye kadar çalışan sadece bir tane)

Başka bir basit çözüm (çok zarif değil, aynı zamanda çok çirkin de değil) bir iç kısım yerleştirip div / spanyüksekliğini elde etmektir ( $(this).find('span).height()).

İşte bu stratejiyi kullanmanın bir örneği:

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

(Bu özel örnek, maksimum yüksekliği canlandırmak ve daraltma sırasında animasyon gecikmesini önlemek için bu hileyi kullanmaktır (max-height özelliği için yüksek sayı kullanıldığında).