在开发项目的时候,有的页面数据很多,一次加载完成需要消耗大量的时间,都做了分页加载。
这里写一段代码,来实现分页加载的时候是如何判断滚动条到页面底部,然后继续请求加载数据的。
var common=function(){};
Common.prototype={
onScrollEvent:function(){
$(window).scroll(function(){
if(common.isPageBottom()){
console.log('滚动条到达页面的底部')
}
});
},
isPageBottom:function(){
var winH = $(window).height(); //页面可视区域高度
var pageH = $(document.body).height();//页面的高度
var scrollT = $(window).scrollTop(); //滚动条top
//这里做一个计算距离底部还差多少,下边跟0.02比就是,滚动条的高度小于页面可视区域高度的的2%
var aa = (pageH-winH-scrollT)/winH;
//这里做比较当他小于0.02的时候我就认为他已经到底部了,为再次请求数据做一个缓冲,提高浏览页面的流畅度
if(aa<0.02){
return true;
}
return false;
},
}