//获取滚动条当前的位置
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,251)">return clientHeight; }
//获取文档完整的高度 function getScrollHeight() { return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); }
<script> window.onscroll = function () { if (getScrollTop() + getClientHeight() == getScrollHeight()) { alert("到达底部"); </script>
动态增加页面元素的示例代码:
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“,不同往下滚动,不停增加,无止尽。
将示例代码修改为ajax相关代码:
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) { newnode.innerHTML = req.readyState + " " + req.status + " " + req.responseText; document.body.appendChild(newline); </script> (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|