拖动滚动条实现网页内容自动加载代码实例
本章节分享一段代码实例，它实现了向下拖动滚动条，能够自动加载网页内容的功能。
这种效果在很多网站都有应用，当然它们加载的内容都是从数据库读取的，下面的演示自然不能从数据库读取内容，不过原理大致如此，实际应用的时候只要和后台人员配合一下就可以实现了。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#antzone{
border:1px solid tomato;
margin-top:20px;
color:#ac1;
height:800
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var range = 50;
var elemt = 500;
var maxnum = 20;
var num = 1;
var totalheight = 0;
var main = $("#content");
$(window).scroll(function(){
var srollPos = $(window).scrollTop();
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if(($(document).height()-range) <= totalheight && num != maxnum) {
main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"
+(num%20)+(num%20)+";height:"+elemt+"px' >hello world"+srollPos+"---"+num+"</div>");
num++;
}
});
});
</script>
</head>
<body>
<div id="content" style="height:960px">
<div id="follow">页面下拉自动加载内容</div>
<div id="antzone">前端教程网欢迎您</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.var range = 50，规定距离下边界还有多少距离就要加载内容。
（3）.var elemt = 500，插入元素的高度。
（4）.var maxnum = 20，最多可以加载的数目。
（5）.var num = 1，声明一个变量并赋初值为1，用来表示加载元素的次序。
（6）.var totalheight = 0，后面会用到，用来存储一个高度。
（7）.var main = $("#content")，获取指定的元素jquery对象。
（8）.$(window).scroll(function(){})，为window对象注册scroll事件处理函数。
（9）.var srollPos = $(window).scrollTop()，获取浏览器向上滚动的尺寸。
（10）.totalheight = parseFloat($(window).height()) + parseFloat(srollPos)，获取客户浏览器客户区高度和向上滚动的高度之和。
（11）.if(($(document).height()-range) <= totalheight && num != maxnum)，判断浏览器距离地段是不是小于等于range，并且没有达到最大数目，那么就执行添加元素的操作。
二.相关阅读:
（1）.scroll事件可以参阅jQuery scroll 事件一章节。
（2）.scrollTop()方法可以参阅jQuery scrollTop()一章节。
（3）.parseFloat()方法可以参阅javascript parseFloat()一章节。
（4）.append()方法可以参阅jQuery append()一章节。