当滚动条滚动到页面底部自动加载增加内容的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操作cookie_获取与修改代码
May 21 Javascript
Js切换功能的简单方法
Nov 23 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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
linux iconv方法的使用
2011/10/01 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
Python中的字典遍历备忘
2015/01/17 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python遍历pandas数据方法总结
2018/02/09 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python使用smtplib模块发送邮件
2020/12/17 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
怎样填写就业意向
2014/04/02 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
幼儿学前班评语
2014/12/29 职场文书
安全温馨提示语大全
2015/07/14 职场文书
财务年终工作总结大全
2019/06/20 职场文书
用python自动生成日历
2021/04/24 Python
Django与数据库交互的实现
2021/06/03 Python