jQuery로 div의 전체 콘텐츠 높이를 어떻게 얻습니까?

jQuery로 div의 전체 콘텐츠 높이를 어떻게 얻습니까?

---

나만의 스크롤 막대를 만들려고합니다. 나는 대부분의 jquery 스크롤바 플러그인을 사용해 보았지만 그들 중 어느 것도 나를 위해 작동하지 않는 것 같아서 나만의 것을 만들기로 결정했습니다. 스크롤 가능한 콘텐츠가있는 오버플로 영역이 있습니다. 스크롤 가능한 콘텐츠 영역의 높이를 파악할 수 있다면 스크롤바가 작동하도록 할 수 있습니다. .scrollHeight () 시도했지만 브라우저가 인식하지 못합니다. 오버플로 영역은 고정 된 위치에 있습니다.

---

scrollHeight함수가 아닌 DOM 객체 의 속성 입니다 .

요소의 스크롤보기 높이입니다. 요소 패딩은 포함하지만 여백은 포함하지 않습니다.

이것을 감안할 때 :

<div id="x" style="height: 100px; overflow: hidden;">
    <div style="height: 200px;">
        pancakes
    </div>
</div>

이는 200을 산출합니다.

$('#x')[0].scrollHeight

예 : http://jsfiddle.net/ambiguous/u69kQ/2/(JavaScript 콘솔이 열린 상태에서 실행).

---

도움이 될 수 있다면 .scrollHeight를 사용하지 마십시오 .

.scrollHeight는 특정 상황에서 다른 브라우저에서 동일한 종류의 결과를 생성하지 않습니다 (스크롤하는 동안 가장 두드러짐).

예를 들면 :

<div id='outer' style='width:100px; height:350px; overflow-y:hidden;'>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
<div style='width:100px; height:150px;'></div>
</div>

만약 당신이

console.log ($ ( '# outer'). scrollHeight);

Chrome, FireFox 및 Opera에서 900px를 얻을 수 있습니다. 훌륭합니다.

그러나 wheelevent / wheel 이벤트를 #outer에 연결하면 스크롤하면 Chrome에서 900px의 상수 값 (정확함)을 제공하지만 FireFox 및 Opera는 아래로 스크롤하면 값이 변경됩니다 (잘못된).

이를 수행하는 매우 간단한 방법은 그렇게하는 것입니다 (실제로 약간의 속임수). (이 예제는 콘텐츠를 #outer에 동적으로 추가하는 동안에도 작동합니다) :

$('#outer').css("height", "auto");
var outerContentsHeight = $('#outer').height();
$('#outer').css("height", "350px");

console.log(outerContentsHeight); //Should get 900px in these 3 browsers

이 세 가지 브라우저를 선택한 이유는 특정 상황에서 세 가지 모두 .scrollHeight 값에 동의하지 않을 수 있기 때문입니다. 나는 내 자신의 스크롤 창을 만드는이 문제에 부딪혔다. 이것이 누군가를 돕기를 바랍니다.

---

우리는 또한 사용할 수 있습니다-

$('#x').prop('scrollHeight') <!-- Height -->
$('#x').prop('scrollWidth')  <!-- Width -->

---

Element.scrollHeight여기에 언급 된대로 함수가 아니라 속성 입니다. 여기 에서 언급했듯이 scrollHeight 속성은 IE8 이후에만 지원됩니다. 그 전에 작동해야하는 경우 임시로 CSS overflow및 height로 설정 auto하면 div가 필요한 최대 높이를 차지하게됩니다. 그런 다음 높이를 가져와 속성을 이전 상태로 되돌립니다.

---

당신은 그것을 얻을 수 있습니다 .outerHeight().

때로는 0. 최상의 결과를 얻으려면 div의 준비 이벤트 에서 호출 할 수 있습니다 .

안전을 위해, 당신은의 높이 설정하지 않아야 div로를 x. 높이 auto를 유지하여 콘텐츠를 올바른 높이로 올바르게 채울 수 있습니다 .

$('#x').ready( function(){
// alerts the height in pixels
alert($('#x').outerHeight());
})

여기 에서 자세한 게시물을 찾을 수 있습니다 .

---

1. 사용 scrollHeight은 버그가있을뿐만 아니라 컨테이너의 높이가 하드 코딩 된 경우 작동하지 않습니다 ( container.height()자체 하지 않고 내용물 높이를 얻고 싶기 때문에 대부분의 경우 ).
2. @ shazboticus-s-shazbot 솔루션은 컨테이너 높이를 일시적으로 다루거나 하드 코딩 된 높이를 가질 수있을 때 좋습니다.
3. 대체 솔루션은 다음과 같습니다.

$('#outer')
    // Get children in array format, as we'll be reducing them into a single number
    .contents().toArray()
    // Filter out text and comment nodes, only allowing tags
    .filter(el => el.nodeType === 1)
    // Sum up all the children individual heights
    .reduce((accumulator, el) => $(el).outerHeight(true) + accumulator, 0);

물론 후자의 대안은 #outer공간을 차지하는 즉각적인 텍스트 자식이없고 측정하려는 경우에만 작동합니다 . 2 센트입니다.

4. If you want to measure unwrapped text, I'd suggest modifying your DOM tree and having an inner <div> of which you can measure easily by doing $('#outer').children().height()

참고URL : https://stackoverflow.com/questions/6853293/how-do-i-get-the-height-of-a-divs-full-content-with-jquery