当滚动条滚动到页面底部自动加载增加内容的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 相关文章推荐
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
小程序实现列表展开收起效果
Jul 29 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php 无限级缓存的类的扩展
2009/03/16 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
vue中轮训器的使用
2019/01/27 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
社区国庆节活动方案
2014/02/05 职场文书
《掌声》教学反思
2014/02/23 职场文书
项目经理任命书内容
2014/06/06 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python