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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jquery实现网页定位导航
Aug 23 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 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
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php图像处理类实例
2015/07/28 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python实现批量文件重命名
2019/10/31 Python
python实现加密的方式总结
2020/01/19 Python
Python enumerate内置库用法解析
2020/02/24 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
课内比教学心得体会
2014/09/09 职场文书
工作年限证明模板
2014/11/01 职场文书
青岛导游词
2015/02/12 职场文书
2015年招生工作总结
2015/05/04 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python