javascript - 使用js从服务器端滚动延迟加载表

Question

我需要显示一个包含大量项目的表格。 所以我想通过服务器端的延迟加载来实现它。 然后，当用户向下(或向上)滚动时，我调用服务器以获取下一个/上一个定义的项目数并显示它们而不是旧项目(或将它们添加到旧项目)。 有没有一种简单的方法来实现它？ 是否有一些 JavaScript 库可以帮助我实现此功能？ 任何帮助将不胜感激。谢谢

Answer 1

您可以使用 scrollHeight、clientHeight 和 scrollTop 来实现此目的，以检测滚动条何时靠近底部区域，然后获取您的新项目:

这是一个例子(the demo):

HTML

<div id="container">  
    <div id="scrollbox" >  
        <div id="content" >  
            <p>Lorem ipsum dolor sit amet</p>  
            <p>Ipsum lorem dolor amet sit</p>  
            <p>Dolor lorem ipsum amet tis</p>  
            <p>Lorem ipsum dolor sit amet</p>  
            <p>Ipsum lorem dolor amet sit</p>  
            <p>Dolor lorem ipsum amet tis</p>  
            <p>Lorem ipsum dolor sit amet</p>  
            <p>Ipsum lorem dolor amet sit</p>  
            <p>Dolor lorem ipsum amet tis</p>  
        </div>  
    </div>  
    <p><span id="status" ></span></p>  
</div>  

CSS

#container{   
    width:400px;   
    margin:0px auto;   
    padding:40px 0;   
}  
#scrollbox{   
    width:400px;   
    height:300px;    
    overflow:auto; overflow-x:hidden;   
}  
#container > p{   
    background:#eee;   
    color:#666;   
    font-family:Arial, sans-serif; font-size:0.75em;   
    padding:5px; margin:0;   
    text-align:rightright;  
} 

JavaScript

$('document').ready(function(){  
    updatestatus();  
    scrollalert();  
});  
function updatestatus(){  
    //Show number of loaded items  
    var totalItems=$('#content p').length;  
    $('#status').text('Loaded '+totalItems+' Items');  
}  
function scrollalert(){  
    var scrolltop=$('#scrollbox').attr('scrollTop');  
    var scrollheight=$('#scrollbox').attr('scrollHeight');  
    var windowheight=$('#scrollbox').attr('clientHeight');  
    var scrolloffset=20;  
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))  
    {  
        //fetch new items  
        $('#status').text('Loading more items...');  
        $.get('new-items.html', '', function(newitems){  
            $('#content').append(newitems);  
            updatestatus();  
        });  
    }  
    setTimeout('scrollalert();', 1500);  
}  

PS:我从 here 复制/粘贴代码源.