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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
webpack入门+react环境配置
Feb 08 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
vue全屏事件开发详解
Jun 17 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
IIS下PHP的三种配置方式对比
2014/11/20 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
显示、隐藏密码
2006/07/01 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python实现Linux中的du命令
2017/06/12 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python 实现性别识别
2020/11/21 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
小学教师培训感言
2014/02/11 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
营销学习心得体会
2014/09/12 职场文书
食品安全责任书范本
2015/05/09 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript