오버플로: 숨김 또는 오버플로: 스크롤 디브의 실제 .높이()를 얻으려면 어떻게 해야 합니까?

오버플로: 숨김 또는 오버플로: 스크롤 디브의 실제 .높이()를 얻으려면 어떻게 해야 합니까?

디브 높이는 방법에 대해 질문이 있습니다.저도 알고 있습니다..height()그리고.innerHeight(), 하지만 이 사건에서 그들 중 누구도 내게 도움이 사건에선문제는 이 경우 오버플로 폭의 디브가 있다는 것입니다. 스크롤과 디브의 높이는 고정되어 있습니다.

사용하면.height()아니면innerHeight(), 둘 다 눈에 보이는 부분의 높이를 알려주지만, 오버플로를 고려하고 싶다면 어떻게 해야 합니까?

DOM 노드의 속성을 사용합니다.$('#your_div')[0].scrollHeight

에 대한 자세한 내용은.scrollHeightproperty는 문서를 참조합니다.

Element.scroll Height 읽기 전용 특성은 오버플로로 인해 화면에 보이지 않는 내용을 포함하여 요소의 내용 높이를 측정한 것입니다.스크롤 높이 값이 최소 클라이언트와 동일합니다.세로 스크롤 막대를 사용하지 않고 시점의 모든 내용을 맞추기 위해 요소의 높이를 지정합니다.요소 패딩은 포함되지만 여백은 포함되지 않습니다.

또 다른 가능성은 html을 오버플로가 되지 않는 곳에 두는 것입니다. 숨김 요소는 절대 상단과 5000px 미만의 위치처럼 화면 밖으로 '아웃'한 다음 요소의 높이를 읽습니다.못생겼지만 잘 작동합니다.

이제 더 이상 -much에서 high max-height 값을 사용할 필요가 없는 이 문제에 대한 다른 해결책을 마련했습니다.붕괴된 DIV의 내부 높이를 계산하기 위해서는 자바스크립트 코드 몇 줄이 필요하지만, 그 이후에는 모두 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);
}

최종예제

전체적인 예는 다음과 같습니다. 먼저 모든 아코디언 패널을 루프하고 저장합니다.scrollHeight값을 CSS 변수로 지정합니다.다음으로 CSS 변수를 다음과 같이 사용합니다.max-height요소의 활성/expanded/열림 상태에 있는 값.

자바스크립트:

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와 몇 줄의 자바스크립트 코드만을 사용하는 적응형 최대 높이 애니메이션(jQuery 필요 없음).

이것이 미래의 누군가(또는 참고로 나의 미래의 나)에게 도움이 되기를 바랍니다.

또 우아하지는 은 은(, ) 입니다를 입니다.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>

(이 예에서는 이 방법을 사용하여 최대 높이를 애니메이션화하고 축소 시 애니메이션 지연을 방지합니다(최대 높이 속성에 높은 숫자를 사용하는 경우).

넘쳐흐르지는 않지만 마이너스 마진으로 숨어 있는 경우:

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

(ugly만 지금까지 작동하는 하나만 해당)

언급URL : https://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div