overflow : hidden 또는 overflow : scroll div의 실제 .height ()는 어떻게 얻습니까?

div 높이를 얻는 방법에 대한 질문이 있습니다. 나는 알고 있어요 .height()하고 innerHeight()있지만, 그들 중 누구도이 경우에 나를 위해 일을하지 않습니다. 문제는이 경우 너비가 넘친 div가 있고 overflow : scroll이며 div의 높이가 고정되어 있다는 것입니다.

내가 사용하는 경우 .height()나 innerHeight(), 둘 다 나에게 가시 영역의 높이를 제공하지만, 내가 계정에 취한 오버 플로워를 원하는 경우 나에 대해 어떻게 가야합니까?

.scrollHeightDOM 노드 의 속성을 사용하십시오 .$('#your_div')[0].scrollHeight

.scrollHeight속성에 대한 자세한 내용은 다음 문서를 참조하십시오 .

Element.scrollHeight는 읽기 전용 특성 때문에 오버플 화면에 보이지 않는 내용을 포함하는 요소의 내용의 높이를 측정한다. scrollHeight 값은 세로 스크롤 막대를 사용하지 않고 뷰의 모든 내용을 맞추기 위해 요소에 필요한 최소 clientHeight와 같습니다. 요소 패딩은 포함하지만 여백은 포함하지 않습니다.

다른 가능성은 HTML을 오버플로가 아닌 비 숨겨진 요소에 배치하는 것입니다 : 위치 절대 상단과 왼쪽 아래로 5000px와 같이 화면의 'out'에 배치 한 다음이 요소 높이를 읽으십시오. 추악하지만 잘 작동합니다.

나는 이것을 위해 또 다른 해결책을 요리했습니다. 더 이상-최대에서 최대 높이 값을 사용할 필요가 없습니다. 접힌 DIV의 내부 높이를 계산하려면 몇 줄의 자바 스크립트 코드가 필요하지만 그 후에는 모두 CSS입니다.

1) 페치 및 설정 높이

축소 된 요소의 내부 높이를 가져옵니다 (을 사용하여 scrollHeight). 내 요소에는 클래스가 .section__accordeon__content있으며 실제로 forEach()모든 패널의 높이를 설정하기 위해 루프 에서 이것을 실행 하지만 아이디어를 얻습니다.

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

2) CSS 변수를 사용하여 활성 항목을 확장하십시오

그런 다음 max-height항목에 .active클래스 가있을 때 CSS 변수를 사용하여 값 을 설정하십시오 .

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

마지막 예

전체 예제는 다음과 같습니다. 먼저 모든 아코디언 패널을 반복하고 해당 scrollHeight값을 CSS 변수로 저장 합니다. 그런 다음 CSS 변수를 max-height요소의 활성 / 확장 / 열림 상태 값으로 사용하십시오.

자바 스크립트 :

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>

(이 특정 예제는이 트릭을 사용하여 최대 높이에 애니메이션을 적용하고 접을 때 애니메이션 지연을 피합니다 (max-height 속성에 높은 수를 사용하는 경우).