js实现滚动条滚动到页面底部继续加载


Posted in Javascript onDecember 19, 2015

这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。

原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下

滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/;如果这个判断为true则表示滚动条滚动到了底部。

实例

<style type="text/css">
 html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
  margin: 0;
  padding:0;
 }
 *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
  .waterfllow-loading{
  z-index: 2000;
  display:none;
 }
 .waterfllow-loading.active{
  display:block;
 }
 .waterfllow-loading img.loading-progress{
  position: fixed;
  /*设置等待条水平居于窗口正中*/
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

  /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
  bottom: 30px;
 } 
 </style>
 <div class="waterfllow-loading">
  <img class="loading-progress" src="busy.gif">
 </div>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定,使用document方式不起作用
 $(window).on('scroll',function(){
 if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
  waterallowData();
 }
 });

 function waterallowData(){
 $('.waterfllow-loading').addClass('active');
 
 /*$.ajax({
  url:url,
  type:"post",
  data: params,
  success:function(data,textStatus,jQXHR){
  //添加数据
  ...

  //隐藏加载条
  $('.waterfllow-loading.active').removeClass('active');
  }
 });*/
 }

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

//获取页面顶部被卷起来的高度
 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可以进垃圾堆了。

好了下面附上完整的代码,有一个小例子(没有后台刷数据,只是显示等待条)

<!DOCTYPE html>
<html lang="ch-cn">
 <head>
<meta charset="utf-8">

<script type="text/javascript" src='jquery-1.9.1.js'></script>
 <style type="text/css">
 html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
  margin: 0;
  padding:0;
 }
 *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
  .waterfllow-loading{
  z-index: 2000;
  display:none;
 }
 .waterfllow-loading.active{
  display:block;
 }
 .waterfllow-loading img.loading-progress{
  position: fixed;
  /*设置等待条水平居于窗口正中*/
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;

  /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
  bottom: 30px;
 } 
 </style>
 </head>
 <body style="background:#ff0;height:1000px;">
 <div class="waterfllow-loading">
  <img class="loading-progress" src="busy.gif">
 </div>
 </body>
 <script type="text/javascript">

 //获取页面顶部被卷起来的高度
 function scrollTop(){
 return Math.max(
  //chrome
  document.body.scrollTop,
  //firefox/IE
  document.documentElement.scrollTop);
 }
 //获取页面文档的总高度
 function documentHeight(){
 //现代浏览器(IE9+和其他浏览器)和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
 return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }
 //获取页面浏览器视口的高度
 function windowHeight(){
 //document.compatMode有两个取值。BackCompat:标准兼容模式关闭。CSS1Compat:标准兼容模式开启。
 return (document.compatMode == "CSS1Compat")?
 document.documentElement.clientHeight:
 document.body.clientHeight;
 }
 </script>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定,使用document方式不起作用
 $(window).on('scroll',function(){
 if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
  waterallowData();
 }
 });

 function waterallowData(){
 $('.waterfllow-loading').addClass('active');
 
 /*$.ajax({
  url:url,
  type:"post",
  data: params,
  success:function(data,textStatus,jQXHR){
  //添加数据
  ...

  //隐藏加载条
  $('.waterfllow-loading.active').removeClass('active');
  }
 });*/
 }
 </script> 
</html>

里面的加载条图片为

js实现滚动条滚动到页面底部继续加载

以上就是滚动条滚动到页面底部继续加载的处理实例,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
Javascript的闭包
Dec 31 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 #Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 #Javascript
jQuery中trigger()与bind()用法分析
Dec 18 #Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 #Javascript
js获取url传值的方法
Dec 18 #Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 #Javascript
jquery获取css的color值返回RGB的方法
Dec 18 #Javascript
You might like
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
初中生三年学习生活的自我评价
2013/11/03 职场文书
初中音乐教学反思
2014/01/12 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
难忘的一课教学反思
2014/04/30 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书