当滚动条滚动到页面底部自动加载增加内容的js代码


Posted in Javascript onMay 13, 2014

1,注册页面滚动事件,window.onscroll = function(){ };

2,相关获取页面高度、滚动条位置、文档高度的函数:

//获取滚动条当前的位置 
function getScrollTop() { 
var scrollTop = 0; 
if (document.documentElement && document.documentElement.scrollTop) { 
scrollTop = document.documentElement.scrollTop; 
} 
else if (document.body) { 
scrollTop = document.body.scrollTop; 
} 
return scrollTop; 
} //获取当前可是范围的高度 
function getClientHeight() { 
var clientHeight = 0; 
if (document.body.clientHeight && document.documentElement.clientHeight) { 
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight); 
} 
else { 
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); 
} 
return clientHeight; 
} 
//获取文档完整的高度 
function getScrollHeight() { 
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); 
}

3,在html页面底部增加代码:
<script> 
window.onscroll = function () { 
if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
alert("到达底部"); 
} 
} 
</script>

这样当滚动条到达页面底部时就会触发alert("到达底部")。下面要做的就是将触发的功能改为ajax调用,往页面中动态增加内容。

4,动态增加页面元素的示例代码:

var newnode = document.createElement("a"); 
newnode.setAttribute("href", "#"); 
newnode.innerHTML = "new item"; 
document.body.appendChild(newnode); 
var newline = document.createElement("br"); 
document.body.appendChild(newline);

将这段代码替换掉alert("到达底部");,就可以看到,当滚动条滚动到底部时,页面底部就会增加一行”new item“,不同往下滚动,不停增加,无止尽。

5,将示例代码修改为ajax相关代码:

<script> 
window.onscroll = function () { 
if (getScrollTop() + getClientHeight() == getScrollHeight()) { 
var xmlHttpReq = null; 
//IE浏览器使用ActiveX 
if (window.ActiveXObject) { 
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
//其它浏览器使用window的子对象XMLHttpRequest 
else if (window.XMLHttpRequest) { 
xmlHttpReq = new XMLHttpRequest(); 
} if (xmlHttpReq != null) { 
//设置请求(没有真正打开),true:表示异步 
xmlHttpReq.open("GET", "/ajaxtest", true); 
//设置回调,当请求的状态发生变化时,就会被调用,传递参数xmlHttpReq 
xmlHttpReq.onreadystatechange = function () { onajaxtest(xmlHttpReq); }; 
//提交请求 
xmlHttpReq.send(null); 
} 
} 
} 
function onajaxtest(req) { 
var newnode = document.createElement("a"); 
newnode.setAttribute("href", "#"); 
newnode.innerHTML = req.readyState + " " + req.status + " " + req.responseText; 
document.body.appendChild(newnode); 
var newline = document.createElement("br"); 
document.body.appendChild(newline); 
} 
</script>

当滚动条到页面底部之后,就会增加以下节点,如下:

2 200
3 200 ajax ok
4 200 ajax ok

这里2、3、4,就是请求的状态readyState,200就是http的回应状态status,ajax ok是/ajaxtext应用返回的文本,具体查看以下参考资料。

按照XMLHttpRequest的的文档说明,应该能够打印出:

0 200

1 200

2 200

3 200 ajax ok

4 200 ajax ok

但是我这里没有打印出0和1这两个状态,这是为什么呢,路过的高手方便吱一声吗?

Javascript 相关文章推荐
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
js语法学习之判断一个对象是否为数组
May 13 #Javascript
js中定义一个变量并判断其是否为空的方法
May 13 #Javascript
jQuery 计算iframe 窗口大小的方法
May 13 #Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 #Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 #Javascript
js浏览器本地存储store.js介绍及应用
May 13 #Javascript
js 获取时间间隔实现代码
May 12 #Javascript
You might like
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
详解python eval函数的妙用
2017/11/16 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
快餐店的创业计划书范文
2014/01/29 职场文书
环保建议书500字
2014/05/14 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
酒会邀请函
2015/01/31 职场文书
关于学习的决心书
2015/02/05 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
MySQL里面的子查询的基本使用
2021/08/02 MySQL