웹 페이지의 div에서 'Endless scroll'

Question

페이지에 끝없이 스크롤 가능한 콘텐츠가 포함 된 div를 만들고 싶습니다.

$(window).scroll(function(){ 

    var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); 
    var scrolltrigger = 0.95; 

    if ((wintop/(docheight-winheight)) > scrolltrigger) { 
    lastAddedLiveFunc(); 
    } 
}); 

질문 : 다음 내가 작성한 데이터베이스에서 더 많은 데이터를로드하기 위해 스크롤 내용의 끝을 인식

다음 코드에 맞는 무한 스크롤을 만드는 것입니다 웹 페이지 전체에서 'div'에 대해 어떻게 쓸 수 있습니까?

(힌트 : 정확한 비슷한 일이 실시간으로 친구의 최근 활동을 보여주고 오른쪽에, 페이스 북의 시세입니다.) 당신은 당신의 사업부를 대신 사용할 수 있습니다

Answer 1

를 들어 창

의 원리는 정확히 동일합니다. div가 브라우저 뷰포트가되고 div 콘텐츠가 문서입니다. >$("#someDiv").scroll()

$(window).scrollTop() - ->$("#someDiv").scrollTop()

$(document).height() ->$("#someDiv")[0].scrollHeight

$(window).height() - 당신은

• $(window).scroll() 교환 할 필요가>$("#someDiv").height()

을하고 그것을 작동합니다 .

• scrollHeight는 속성이 아닌 함수 : 것을

  참고.

• scrollHeight은 jQuery가 아니므로 선택기의 실제 javascript 요소 (즉, [0])에서 가져와야합니다. 또 다른 방법은 $ ("# someDiv"). prop ("scrollHeight")를 사용하는 것입니다.

Answer 2

$("#yourdiv").scroll(function(){ 

//your logic 
} 

예를

$('#yourdiv').scrollTop() // etc 

Answer 3

사용이

// get box div position 
var box = document.getElementById('box').offsetTop; 

window.onscroll = function(){ 

    // get current scroll position 
    var scroll_top = document.body.scrollTop || document.documentElement.scrollTop; 

    document.getElementById('scbox').innerText = scroll_top + ' ' + box; 

    // if current scroll position >= box div position then box position fixed 
    if(scroll_top >= box) 
     document.getElementById('box').style.position = 'fixed'; 
    else 
     document.getElementById('box').style.position = 'relative';  
}