2012-02-22 3 views
10

요소에서 나는 CSS overflow: scroll;을 받았습니다. 이제 jQuery에서 원래 높이 (모든 자식 요소의 높이 포함)를 갖기를 원합니다. 이 요소 아래에있는 어린이들은 동적으로 변하고 있습니다. 스크롤 이벤트에 대한 관심이 필요합니다.요소의 scrollheight는 정의되지 않은 값을 제공합니다.

$("#container").scroll(function(e) { 
    scrollAll(); 
}); 

function scrollAll(){ 
    var elemHeight = $("#container").scrollHeight; 
    var scrollHeight = $("#scrollbars").scrollHeight; 
    var ratio = elemHeight/scrollHeight; 

    $("#outup").html(elemHeight +" and "+ scrollHeight +" ratio "+ ratio +" = "+ ($("#container").scrollTop())); 
} 

문제 : 다음은 코드입니다 그것은 scrollHeight is undefined 오류가 발생합니다. 뭐가 문제 야?

답변

34

는 jQuery를에 더 scrollHeight 없다 - 그것은 scrollTop()의 : 또는

var elemHeight = $("#container").scrollTop(); 
var scrollHeight = $("#scrollbars").scrollTop(); 

네이티브 scrollHeight 속성을 사용하려는 경우, 당신은 다음과 같이 직접 jQuery 오브젝트의 DOM 요소에 액세스해야합니다

var elemHeight = $("#container")[0].scrollHeight; 
var scrollHeight = $("#scrollbars")[0].scrollHeight; 
+0

http://stackoverflow.com/questions/8100099/checking-for-scrollheight-of-an-element-sometimes-returning-0 –

+0

큰 성과를 올렸습니다. 무엇을 알 수 있습니까? $ ("# container") [0]과 $ ("# container")의 차이입니다. –

+6

'$ ("# container")'는 $ jQuery 객체에 래핑 된 요소를 반환하고, $ ("# container") [0]'은 DOM 요소 자체를 반환합니다. –

10

Jquery 1.6 이상을 사용하는 경우 prop를 사용하여 값에 액세스하십시오.

$("#container").prop('scrollHeight') 

이전 버전은 attr에서 값을 가져 오지만 1.6 이후에는 가져 오지 않았습니다.

관련 문제