码迷,mamicode.com
首页 > 其他好文 > 详细

滚动加载数据

时间:2016-09-06 13:55:38      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

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

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

如下的例子,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++;
        //执行加载数据的函数
        
    }
})

 

滚动加载数据

标签:

原文地址:http://www.cnblogs.com/lw5116/p/5845254.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!