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自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
js实现简单数字变动效果
Nov 06 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
iview实现图片上传功能
Jun 29 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
JavaScript流程控制(分支)
Dec 06 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
php&amp;mysql 日期操作小记
2012/02/27 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
webpack4简单入门实例
2018/09/06 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
浅谈django model postgres的json字段编码问题
2018/01/05 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python实现登录与注册系统
2020/11/30 Python
学校后勤人员职责
2013/12/27 职场文书
工地门卫岗位职责
2013/12/30 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
公证委托书
2014/08/01 职场文书
贷款承诺书
2015/01/20 职场文书
全陪导游词开场白
2015/05/29 职场文书
基于Python实现股票收益率分析
2022/04/02 Python