当滚动条滚动到页面底部自动加载增加内容的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 相关文章推荐
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
使用Vue自定义指令实现Select组件
May 24 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 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
php split汉字
2009/06/05 PHP
浅谈php自定义错误日志
2015/02/13 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python多线程实例教程
2014/09/06 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
车间主管岗位职责
2013/11/14 职场文书
安全生产管理责任书
2014/04/16 职场文书
师范毕业生求职信
2014/07/11 职场文书
党性教育心得体会
2014/09/03 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Python实现学生管理系统(面向对象版)
2021/06/24 Python
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers