首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现滚动条滚动到页面底部继续加载

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

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

- Author -

chua1989

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
JS的深浅复制详细
Oct 16 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
DE1103(2) DE1107(3) R71E(1) WR-800F(1) R9700(1) DE1102(1) 胆机(1) SONY600GR(1) ICOM(2) DE1105(1)
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
Javascript 面试题随笔
2011/03/31 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python检查指定文件是否存在的方法
2015/07/06 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python如何制作缩略图
2019/04/30 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
暑期社会实践学生的自我评价
2014/01/09 职场文书
初中校园之声广播稿
2014/01/15 职场文书
运动会入场解说词300字
2014/01/25 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
党的群众路线对照检查材料（个人）
2014/09/24 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python