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