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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue实现百度搜索功能
Dec 28 Javascript
原生js生成图片验证码
Oct 11 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 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
第十五节--Zend引擎的发展
2006/11/16 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
React diff算法的实现示例
2018/04/20 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
微信小程序实现菜单左右联动
2020/05/19 Javascript
python修改操作系统时间的方法
2015/05/18 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
python time.strptime格式化实例详解
2021/02/03 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
代领毕业证委托书
2014/08/02 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
小学毕业感言200字
2015/07/30 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis