Jquery : 테이블 무한 스크롤

Question

내 Jquery 스크립트에서 테이블이 브라우저 창보다 긴 경우 첫 번째 행을 제거하고 무한 루프의 테이블 맨 아래에 추가합니다. '#usertable'은 내 테이블의 ID입니다.

("<table id="usertable"><tr><td>...</td><td>...</td></tr></table> 

$(function() { 
function appendFirstRow() { 
    $('#usertable').append($('#usertable tr:first')); 

    setTimeout(function() { 
     appendFirstRow(); 
    }, 1500); 
} 

function checkScrollBar() { 
    var hContent = $('#usertable').height(); 
    var hWindow = $(window).height(); 

    if(hContent > hWindow) { 
     return true;  
    } 

    return false; 
} 

if (checkScrollBar()) { 
    $("html, body").animate({ scrollTop: $(document).height() }, 1000); 

    appendFirstRow(); 
} 
}); 

내가 페이지를 지속적으로 무한 페이지를 스크롤처럼 보이는 있도록이 조금 부드러운 일어날하려는 : 그 이외에, 그것은 일반 HTML 테이블입니다. 어떻게 구현할 수 있습니까?

Answer 1

무한 스크롤을 원한다면 콜백을 사용하여 새로운 스크롤을 시작하고 싶을 것입니다. 구문의 정확성에 대한 보증이 없음 :

$(function() { 
    function checkScrollBar() { 
     var hContent = $('#usertable').height(); 
     var hWindow = $(window).height(); 

     if(hContent > hWindow) { 
      return true;  
     } 

     return false; 
    } 

    var scroll = function() 
    { 
     //if there is enough space, replace the element 
     if($(window).scrollTop() > $('#usertable tr:first').height()) 
     { 
      $('#usertable').append($('#usertable tr:first')); 
      $(window).scrollTop($(window).scrollTop() - $('#usertable tr:first').height()) 
     } 

     //otherwise, just scroll a little 
     $("html, body").animate({ scrollTop: 300 }, { duration: 300, complete: scroll}); 
    } 

    if (checkScrollBar()) { 
     scroll(); 
    } 
});