2012-11-01 4 views
0

이와 같은 요소를 갖는아래로 스크롤하면 JQuery 경고?

<div id="threads-list" style="overflow-y: scroll; height: 200px;"> 
// Posts 
</div> 

이 어떻게 (경고 않음) 사용자가 버튼에 도달 (또는 그 일에서 10px됩니다) 때?

$('#threads-list').scroll(function() { 
    if ($('#threads-list').height() + $('#threads-list').scrollTop() == document.getElementById('threads-list').offsetHeight) { 
     console.log('do'); 
     } 
    }); 

그것은 문제를 보인다 .height의() (모두 200 픽셀) 컨테이너의 높이 인이 아니라 콘텐츠와 동일한를 반환 .offsetHeight로되어

내가 지금 노력하고 무엇인가 안으로, 나는 콘텐츠의 정확한 높이를 얻는 것이 문제를 해결하는 열쇠가 될 것이라고 생각합니다.

답변

0

offsetHeight은 잘못된 것입니다. 이 시도 :

$('#threads-list').scroll(function() { 
    var el = $(this); 
    if (el.height() + el.scrollTop() === this.scrollHeight) { 
     alert('do'); 
    } 
});​ 

scrollHeight 현재 스크롤 숨겨진 부분을 포함하여 전체 요소의 높이입니다.

바이올린 : http://jsfiddle.net/caFwW/

0

당신은 ... 나는 마지막에 당신이 원하는 여러 번 일을 피하기 위해 플래그를 사용한

var container = $('#threads-list'), 
    maxScroll = container[0].scrollHeight - container.height(), 
    threshold = 10, 
    endFlag = false; 

container.on('scroll', function(e){ 
    if (maxScroll - container.scrollTop() < threshold){ 
     if (!endFlag){ 
      endFlag = true; 
      console.log('The END!'); 
     } 
    } else { 
     endFlag = false; 
    } 
}); 

데모에서 http://jsfiddle.net/gaby/vXzk3/1/


을 수행해야합니다
관련 문제