滚动加载数据

Posted 2020-08-07 芦苇荡

滚动加载数据的基本原理：

当滚动高度与可见高度大于或等于内容高度时，加载下一页的数据。

如下的例子，class名为result_con的div出现滚动条：

 var currentPage = 1;//当前页
 var maxPage = 10;//总共页数

// 滚动加载数据

 $(".result_con").on("scroll",function () {
        var viewH = $(this).height();// 可见高度
        var contentH = $(this).get(0).scrollHeight;// 内容高度
        var scrollTop = $(this).scrollTop();// 滚动高度
       // console.info(viewH);
        // console.info(contentH);
       // console.info(scrollTop);
        if (viewH + scrollTop  >= contentH && currentPage < maxPage) {
            currentPage++;
            //执行加载数据的函数
            
        }
})

如果是document出现滚动条，则

//滚动加载数据
$(document).on("scroll",function () {
    var viewH = document.body.clientHeight;// 可见高度
    var contentH = document.body.scrollHeight;// 内容高度
    var scrollTop = $(this).scrollTop();// 滚动高度
    //console.info(viewH);
    //console.info(contentH);
    //console.info(scrollTop);
    if (viewH + scrollTop  >= contentH && currentPage < maxPage) {
        currentPage++;
        //执行加载数据的函数
        
    }
})