滚动条到底部自动加载

//获取滚动条当前的位置

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);

}

<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相关代码：

<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>