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


Posted in Javascript onDecember 18, 2016

需求:在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) {
    var showLength = records.data.length;//需要显示的总长度
    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++;//避免重复执行
          }
        }
      });
    }
    function load_records(start, end) {
      for (var i = start; i < end; i++) {
        var stime = records.data[i].time;
        var accure_time = stime.slice(5, stime.length);
        var record_html = '<div class="records_item"><img src=' + records.data[i].avatar + ' class="avatar"/><div class="buyer_info"><p class="buyer_name">' + records.data[i].account + '</p><p class="status_title">购买成功</p></div>\n\<' +
          'div class="buyer_address"><p class="buy_address">' + records.data[i].city + ' IP:' + records.data[i].ip + '</p>\n\<' +
          'p class="buy_time">' + accure_time + '</p></div></div>';
        $(record_html).appendTo('.records_body');//插入一条购买记录
      }
    }
  },
  error: function () {
    console.log('some errors happened!');
  }
});

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

将触底判断条件更改为

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实用基础超详细介绍
Apr 11 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
简单实现node.js图片上传
Dec 18 #Javascript
Javascript计算二维数组重复值示例代码
Dec 18 #Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 #Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 #Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 #Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 #Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 #Javascript
You might like
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
MySQL最常见的操作语句小结
2015/05/07 Python
python比较两个列表大小的方法
2015/07/11 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python逆序打印各位数字的方法
2018/06/25 Python
python快排算法详解
2019/03/04 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
django框架中间件原理与用法详解
2019/12/10 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
开放系统互连参考模型
2016/06/29 面试题
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
实用求职信范文分享
2013/12/25 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
合作意向书范本
2014/03/31 职场文书
公司离职证明范本
2014/10/17 职场文书
八月迷情观后感
2015/06/11 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书