scroll事件实现监控滚动条并分页显示示例(zepto.js)
scroll事件实现监控滚动条并分页显示示例(zepto.js )
需求:在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。
scroll事件实现监控滚动条并分页显示示例(zepto.js)的更多相关文章
- scroll事件实现监控滚动条并分页显示示例(zepto.js )
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
- scroll事件实现监控滚动条改变标题栏背景透明度(zepto.js )
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
- jQuery scroll事件实现监控滚动条分页示例(转)
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
- PHP+MySQL分页显示示例分析
Web开发是今后分布式程式开发的主流,通常的web开发都要涉及到与数据库打交道,客户端从服务器端读取通常都是以分页的形式来显示,一页一页的阅读起来既方便又美观.所以说写分页程序是web开发的一个重要组 ...
- JQuery 分页显示jquery-pager-1.0.js
原版是jquery-pager-1.0.js,经过变更修改加上按照项目中的一些需要修改过来. //初始化分页控件 PagerOptions为配置参数 url为要提交的url地址,如果不需要提交则可以为 ...
- PHP+MySQL Smarty简单分页显示示例
一.分页程序的原理 分页程序有两个非常重要的参数:每页显示几条记录($pagesize)和当前是第几页($page). 有了这两个参数就可以很方便的写出分页程序,我们以MySql数据库作为数据源,在m ...
- 利用表格分页显示数据的js组件bootstrap datatable的使用
前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...
- 利用表格分页显示数据的js组件datatable的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- scroll事件的优化以及scrollTop的兼容性
scrollTop的兼容性 scroll事件,当用户滚动带滚动条的元素中的内容时,在该元素上面触发.<body>元素中包含所加载页面的滚动条. 虽然scroll事件是在window对象上发 ...
随机推荐
- UvaOJ10369 - Arctic Network
/* The first line of each test case contains 1 <= S <= 100, the number of satellite channels! ...
- Zookeeper-Zookeeper client
当我写完Zookeeper leader选举后,准备看看Zookeeper的存储和处理客户端请求的时候发现,如果能看看Zookeeper的API是不是在理解后面的过程更好些呢. Zookeeper的c ...
- c#方法重载,可选参数,命名参数。
其实这里没什么可说哦,c++的语法大同小异.先看一段代码. class Program { public static void Test(int a) { Console.WriteLine(&qu ...
- Redis持久化方法对比分析
1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能, ...
- Windows Azure Virtual Network (6) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (1)
<Windows Azure Platform 系列文章目录> 注意:本文介绍的是Global Azure (http://www.windowsazure.com),如果你使用的是由世纪 ...
- QT学习笔记3
对话框 新建了一个对话框,在新建项目选择类型时是Dialog即可. 添加的代码如下,注意QCheckBox 并没有添加头文件定义,只是加了类的前向声明.因为我们仅仅使用的是指针,并不涉及到这些类的函数 ...
- CNN笔记
Deep Learning是全部深度学习算法的总称,CNN是深度学习算法在图像处理领域的一个应用. 转 http://blog.csdn.net/stdcoutzyx/article/details/ ...
- Elasticsearch——多索引的使用
在Elasticsearch中,一般的查询都支持多索引. 只有文档API或者别名等不支持多索引操作,因此本篇就翻译一下多索引相关的内容. 首先,先插入几条数据: $ curl -XPOST local ...
- 《Inside UE4》-0-开篇
<Inside UE4>-0-开篇 InsideUE4 前言 VR行业发展是越来越火热了,硬件设备上有HTC VIVE,Oculus rift,PS VR,各种魔镜:平台上有Steam ...
- AndroidDevTools简介
AndroidDevTools简介 Android Dev Tools官网地址:www.androiddevtools.cn 收集整理Android开发所需的Android SDK.开发中用到的工具. ...