Как мне получить настоящее.высота () переполнения: скрытый или переполнение: прокрутка div?

у меня есть вопрос о том, как получить высоту div. Я в курсе .height() и innerHeight(), но ни один из них не делает работу за меня в этом случае. Дело в том, что в этом случае у меня есть div, который переполнен шириной переполнения: прокрутка и div имеет фиксированную высоту.

если я использую .height() или innerHeight(), оба из них дают мне высоту видимой области, но если я хочу, чтобы перелетные учитывались, как мне идти?

4 138
jquery overflow height

4 ответа:

использовать .scrollHeight свойство узла DOM:$('#your_div')[0].scrollHeight

262

подробнее о .scrollHeight свойство относится к docs:

на элемент.scrollHeight атрибут только для чтения-это измерение высоты содержимого элемента, включая содержимое, не видимое на экране из-за переполнения. Значение scrollHeight равно минимальному значению clientHeight, которое требуется элементу для размещения всего содержимого в точке обзора без использования вертикальной полосы прокрутки. Она включает в себя элемент обивка но не его маржа.

5

другой возможностью было бы поместить html в не переполнение:скрытый элемент, помещенный " вне " экрана, например, положение абсолютного верхнего и левого щелей, а затем 5000px, а затем прочитать эту высоту элементов. Это некрасиво, но работает хорошо.

3

еще одно простое решение (не очень элегантное, но и не слишком уродливое) - разместить внутренний div / span затем получить его высоту ($(this).find('span).height()).

вот пример использования этой стратегии:

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

(этот конкретный пример использует этот трюк, чтобы анимировать максимальную высоту и избежать задержки анимации при сворачивании (при использовании высокого числа для свойства max-height).

0