Jquery：表格的無限滾動

Question

在我的Jquery腳本中，如果表格長於瀏覽器窗口，我將刪除第一行並將其添加到表格底部的無限循環中。 '#usertable'是我的表的ID。除此之外，它是一個普通的HTML表：

("<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(); 
} 
}); 

我想這所以它看起來像的頁面是不斷通過無限滾動頁面發生一點點順暢。我怎樣才能實現這個？

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(); 
    } 
});