上网时经常会看到许多酷炫的网页，其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容，一直都很好奇是怎么样做到的，于是自己也尝试着写了一下。
先上个完整代码吧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery.min.js"></script> <style> div{ width:900px; height:800px; } li{ list-style-type:none; } </style> </head> <body id="container"> <div>lfjakjflkf</div> <script> //获取滚动条当前的位置 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); } window.onscroll = function () { if(getscrolltop() + getclientheight() == getscrollheight()) { var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP") }; xhr.open("get","load.json",true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4&& xhr.status==200){ var txt = xhr.responseText; var str = ""; // 由于获取到的是json字符串，因此必须现将其转换为json对象。 $.each(JSON.parse(txt),function(key,value){ str += "<li>"+'姓名：'+value[0].name+'。年龄为：'+value[0].age+'。性别为：'+value[0].sex+"</li>"+"<br/>"+"<br/>"; $("body").append(str) }) } } xhr.send(); } } </script> </body> </html>
load.json文件的代码如下：
{"person":[
{"name":"tom","age":"25","sex":"男"}
]}
好了，下面来分析下这段代码，其实先是页面加载完毕会有一部分内容，然后滑动滚动条，一直到文档可视区域高度+滚动条距离文档顶部高度 等于 文档总高度时 异步加载一个json文件的内容。
这里有几个要点：1、获取文档的完整高度。2、获取文档可视区域高度。3、获取滚动条距离文档顶部的高度。4、判断滚动条是否滑动到页面底部，如到了底部则异步加载json文件。5、需要将异步加载的json文件渲染到页面中，由于获取到的是json字符串，因此需要使用JSON.parse()方法先将其转换为json对象，才可以使用$.each()方法进行遍历，然后逐个获取数据。
其实我这里获取文档高度、可视区域高度以及滚动条距离文档顶部高度使用js写的，相对要复杂点，如果用jQuery写的话，会是很简洁的，如
获取文档完整高度，可以使用$(document).height();
获取文档可视区域高度，可以使用$(window).height();
获取滚动条距离文档顶部的高度，可以使用$(window).scrollTop()。