scroll事件实现监控滚动条并分页显示(zepto.js)

前端之家收集整理的这篇文章主要介绍了scroll事件实现监控滚动条并分页显示(zepto.js)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需求:

在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点。

实现:

首先理解三个概念,分别是contentH,viewH,scrollTop。

内容的高度,包括可见部分以及滚动条下面的不可见部分。

包括可见部分也不包括滚动条下面的不可见部分。

底部,此时scrollTop为1700,所以这个1700也可以理解为滚动条可以滚动的长度。当滑动条拉到底部的时候,contentH=viewH+scrollTop。

故可实现如下:

显示的总长度 var flag = showLength <= 10 ? showLength : 10; load_records(0,flag);//开始加载第一页 hxmClickStat('mar_all_207_ssjk.goumai.load.' + 1,{url_ver: "SJCGBS-10030"});//不论长度是否超过10都发送第一页埋点 if (showLength > 10) { var origin = 1,load = 2; $('.records_body').scroll(function () { var contentH = $(this).get(0).scrollHeight; var viewH = $('.records_body').height(); var scrollTop = $(this).scrollTop(); var pages = 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++;//避免重复执行 }

\n\<' + 'div class="buyer_address">

\n\<' + 'p class="buy_time">' + accure_time + '

'; $(record_html).appendTo('.records_body');//插入一条购买记录 } } },error: function () { console.log('some errors happened!'); } });

以上方法在苹果手机浏览器中会达不到预期效果解决方法代码改进

将触底判断条件更改为

= contentH && load <= pages)

究其原因,故在滚动时将scrollTop和viewH、contentH分别打印出来,滑到底部的时候发现他们有1个单位的误差,可能是因为某些div元素的高度不为整数而js在判断的时候直接将其取整了,故可以选择将其加1。

也可以使用另一种方式百分比的判断条件来实现:在滚动条距离底端2%以内:= 0.98。

或者使用绝对数值范围来实现,滚动条距离底端30px以内:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章