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

Jquery：无限滚动表格

1 个答案: