首页 > 代码库 > 滚动加载数据
滚动加载数据
滚动加载数据的基本原理:
当滚动高度与可见高度大于或等于内容高度时,加载下一页的数据。
如下的例子,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++; //执行加载数据的函数 }})
滚动加载数据
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。