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实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jQuery实现影院选座订座效果
Apr 13 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
PHP游戏编程25个脚本代码
2011/02/08 PHP
php三元运算符知识汇总
2015/07/02 PHP
基于jquery的超简单上下翻
2010/04/20 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
vue跨域解决方法
2017/10/15 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python几种常见算法汇总
2020/06/02 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python如何使用代码运行助手
2020/07/03 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
shell的种类有哪些
2015/04/15 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
运动会广播稿300字
2014/01/10 职场文书
护士检查书
2014/01/17 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
疾病捐款倡议书
2014/05/13 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技