jQuery实现当拉动滚动条到底部加载数据的方法分析


Posted in jQuery onJanuary 24, 2019

本文实例讲述了jQuery实现当拉动滚动条到底部加载数据的方法。分享给大家供大家参考,具体如下:

滚动条到底部加载数据原理很简单,就是为window或者滚动元素添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,

如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下

滚动条卷起来的高度 + 窗口高度 > 文档的总高度 

$(window).on('scroll',function(){
  if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
    loadMore();
  }
});

获取页面顶部被卷起来的高度函数

//获取页面顶部被卷起来的高度
function scrollTop(){
 return Math.max(
 //chrome
 document.body.scrollTop,
 //firefox/IE
 document.documentElement.scrollTop);
}

chrome浏览器和Firefox/IE对滚动条是属于body还是html理解不同导致处理不同。

获取页面文档的总高度

//获取页面文档的总高度
function documentHeight(){
 //现代浏览器(IE9+和其他浏览器)和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
 return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}

这个算法和jQuery计算文档高度的方法一致。

获取页面浏览器视口的高度

function windowHeight(){
 return (document.compatMode == "CSS1Compat")?
 document.documentElement.clientHeight:
 document.body.clientHeight;
}

这里需要说明的是document.compatMode这个东东。很陌生,一般情况貌似没有遇到过。

document.compatMode有两个取值"BackCompat"和"CSS1Compat"。官方解释是BackCompat:标准兼容模式关闭。

CSS1Compat:标准兼容模式开启。

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,

但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。

举个例子说明两种模式之间的差别有多大。

  • 当document.compatMode等于"BackCompat"时,浏览器客户区宽度是document.body.clientWidth
  • 当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth

还有其他属性类似。这里不说了,但是我们可以预见两种模式导致IE渲染的基石都更改了,可想而知构建出来的建筑物差别当有多大。

所以请为每一个页面声明Doctype不仅仅是一个好习惯,而且是一个必要的处理。Quirks Mode可以进垃圾堆了。

当用户滚动元素中到一个不同的地方时,scroll事件将发送到这个元素。它适用于window对象,但也可滚动框架与CSS overflow属性设置为scroll的元素。

1、普通的div滚动到底部加载更多的方法

<div id="test">内容</div>
$('#test').scroll(function(event){
  var top = $(this).scrollTop();
  var height = $(this).height();
  var scrollHeight = $(this).get(0).scrollHeight;
  if(scrollHeight <= top+height){
    loadMore();
  }
});

结果实验发现#test的div怎么样也不能接受scroll时间,最后经过查找资料和测试,发现要给div加上overflow和height的属性。

#test{
  overflow:scroll;
  height:655px;
}

2、window滚动事件:

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();       // 滚动条距离顶部的高度
  //scrollHeight,windowHeight,scrollHeight1三个height相同,都是这个页面的高度
  var scrollHeight = $(document).height();     // 当前页面的总高度
  var windowHeight = $(window).height();      // 当前可视的页面高度,jquery获取的不是屏幕的高度,而是整个文档的高度
  var scrollHeight1 = $("#test").get(0).scrollHeight;
  var windowidth = $(window).width();
  var documentwidtht = $(document).width() ;
  var innerHeight = window.innerHeight; //window的高度,即手机的高度
  var clientHeight = document.body.clientHeight; //window的高度
  var clientHeight1 = document.documentElement.clientHeight;//这个是body的整个高度,chrom测试
  if(scrollTop + innerHeight >= scrollHeight){    // 距离顶部+当前高度 >=文档总高度,即代表滑动到底部
   loadMore();
  }
});

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
Jquery的Ajax技术使用方法
Jan 21 #jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
jquery的$().each和$.each的区别
Jan 18 #jQuery
You might like
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
自我鉴定模板
2013/10/29 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
成人继续教育实施方案
2014/03/01 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
银行给客户的感谢信
2015/01/23 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python