scroll事件实现监控滚动条并分页显示(zepto.js)
需求：在APP落地页上的底部位置显示此前其他用户的购买记录，要求此div盒子只显示3条半，但一页有10条，div内的滑动条滑到一页底部自动加载下一页并发加载埋点。
实现：首先理解三个概念，分别是contentH，viewH，scrollTop。
contentH:即所要滑动的元素内容的高度，包括可见部分以及滚动条下面的不可见部分。
ViewH:即我们看到的这个DIV的高度，不包括可见部分也不包括滚动条下面的不可见部分。
scrollTop:即滚动条距离顶部的距离，若scrollTop的值为0，则代表滚动条在最上面。拉动滚动条，从最上面到最下面，变化的是scrollTop的值。例：假如contentH的高度为2000，而这个DIV的高度只有300，那么还有1700不可见，拉动滚动条到最底部，此时scrollTop为1700，所以这个1700也可以理解为滚动条可以滚动的长度。当滑动条拉到底部的时候,contentH=viewH+scrollTop。
故可实现如下：
$.ajax({
type:"get",
url:"record.json",//测试用假数据
dataType:"json",
success:function(records){
varshowLength=records.data.length;//需要显示的总长度
varflag=showLength<=10?showLength:10;
load_records(0,flag);//开始加载第一页
hxmClickStat('mar_all_207_ssjk.goumai.load.'+1,{url_ver:"SJCGBS-10030"});//不论长度是否超过10都发送第一页埋点
if(showLength>10){
varorigin=1,load=2;
$('.records_body').scroll(function(){
varcontentH=$(this).get(0).scrollHeight;
varviewH=$('.records_body').height();
varscrollTop=$(this).scrollTop();
varpages=Math.ceil(showLength/10);//需要显示的总页数
if(viewH+scrollTop==contentH&&load<=pages){
if(load*10<showLength){
load_records(origin++*10,load++*10);//加载下一页的10条数据
hxmClickStat('mar_all_207_ssjk.goumai.load.'+origin,{url_ver:"SJCGBS-10030"});//滑动到底部开始加载下一页时发送埋点
}else{
load_records(origin*10,showLength);//加载最后一页
hxmScrollBottomStat('mar_all_207_ssjk.goumai.bottom',{url_ver:"SJCGBS-10030"});//最后一页发送埋点
load++;//避免重复执行
}
}
});
}
functionload_records(start,end){
for(vari=start;i<end;i++){
varstime=records.data[i].time;
varaccure_time=stime.slice(5,stime.length);
varrecord_html='<divclass="records_item"><imgsrc='+records.data[i].avatar+'class="avatar"/><divclass="buyer_info"><pclass="buyer_name">'+records.data[i].account+'</p><pclass="status_title">购买成功</p></div>\n\<'+
'divclass="buyer_address"><pclass="buy_address">'+records.data[i].city+'IP:'+records.data[i].ip+'</p>\n\<'+
'pclass="buy_time">'+accure_time+'</p></div></div>';
$(record_html).appendTo('.records_body');//插入一条购买记录
}
}
},
error:function(){
console.log('someerrorshappened!');
}
});
以上方法在苹果手机浏览器中会达不到预期效果，解决方法及代码改进
将触底判断条件更改为
if(viewH+scrollTop+1>=contentH&&load<=pages)
究其原因，故在滚动时将scrollTop和viewH、contentH分别打印出来，滑到底部的时候发现他们有1个单位的误差，可能是因为某些div元素的高度不为整数而js在判断的时候直接将其取整了，故可以选择将其加1。
也可以使用另一种方式百分比的判断条件来实现：在滚动条距离底端2%以内：scrollTop/(contentH–viewH)>=0.98。
或者使用绝对数值范围来实现，滚动条距离底端30px以内：contentH–viewH–scrollTop<=30。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。