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

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

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

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

Для получения дополнительной информации о .scrollHeightсобственности обратитесь к документации :

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

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

Я только что подготовил другое решение для этого, где больше нет необходимости использовать значение от -много до максимального-максимального значения. Для вычисления внутренней высоты свернутого DIV требуется несколько строк кода javascript, но после этого это все CSS.

1) Извлечение и установка высоты

Получить внутреннюю высоту свернутого элемента (используя scrollHeight). У моего элемента есть класс, .section__accordeon__contentи я фактически запускаю его в forEach()цикле, чтобы установить высоту для всех панелей, но вы поняли идею.

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

2) Используйте переменную CSS, чтобы развернуть активный элемент

Затем используйте переменную CSS, чтобы установить max-heightзначение, когда у элемента есть .activeкласс.

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

Последний пример

Таким образом, полный пример выглядит следующим образом: сначала переберите все панели accordeon и сохраните их scrollHeightзначения в виде переменных CSS. Затем используйте переменную CSS в качествеmax-height значения активного / расширенного / открытого состояния элемента.

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

И там у вас есть это. Адаптивная анимация максимальной высоты с использованием только CSS и нескольких строк кода JavaScript (jQuery не требуется).

Надеюсь, что это поможет кому-то в будущем (или моей будущей личности для справки).

Для тех, кто не переполняется, а скрывается от отрицательного поля:

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

(некрасиво, но пока только один)

Другое простое решение (не очень элегантное, но и не слишком уродливое) - поместить внутреннюю часть, 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>

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