拖动滚动条加载数据代码实例:
此种效果应该不会陌生，比如本站的特效版块就是使用的类似效果，就是当向下拖动滚动条的时候，能够实时的加载相应的内容，这样的话可以节省带宽，没有必要加载全部的内容，而是根据需要进行加载，下面通过一个简单的实例介绍一下如何实现此效果。
代码如下:
[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="
http://www.softwhy.com/" />
<title>拖动滚动条加载数据代码实例-蚂蚁部落</title>
<style type="text/css">
#father div
{
font-size:100px;
background:#ccc;
margin-top:5px;
text-align:center;
}
#top
{
width:30px;
height:1000px;
background-color:green;
margin:0px auto;
text-align:center;
color:red;
}
</style>
<script type="text/javascript" src="
http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var i=0;
$(window).bind("scroll",function(event)
{
var top=document.documentElement.scrollTop+document.body.scrollTop;
var textheight=$(document).height();
if(textheight-top-$(window).height()<=100)
{
if(i>=100)
{
return;
}
i++;
$('<div>' + i + '</div>').appendTo($('#father'));
}
})
})
</script>
</head>
<body>
<div id="top">蚂蚁部落欢迎您，请向下拖动滚动条查看效果</div>
<form id="form1">
<div id="father">
</div>
</form>
</body>
</html>
注意:运行编辑器之后，再按F5刷新网页即可查看演示。
以上代码实现了我们想要的功能，当向下拖动滚动条的时候，能够实时的加载一些内容，当然在实际应用中，记载的内容一般都是从数据库读取的，这里只是演示一下实现过程。下面简单介绍一下如何实现此效果。
一.实现原理:
当向下拖动滚动条的时候，会触发scroll事件，进而执行注册的scroll事件处理函数，此函数可以判断网页底部被隐藏内容的高度，如果小于指定的高度值，就会向father元素中添加div元素，主要原理大体如此，具体可以参阅代码注释自行理解。
二.代码注释:
1.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.var i=0;，声明一个变量，将将变量的值赋值为0。
3.$(window).bind("scroll",function(){})，为窗口注册scroll事件处理函数。
4.var top=document.documentElement.scrollTop+document.body.scrollTop，可以获取网页向上滚动的尺寸，使用了兼容性写法。
5.var textheight=$(document).height()，获取网页的高度。
6.if(textheight-top-$(window).height()<=100){}，网页的高度减去网页向上滚动的尺寸再减去窗口的高度，就是网页底部被隐藏的尺寸，如果这个值小于等于100，那么就会执行大括号中的代码。
7.if(i>=100){return}，如果i的值大于等于100，就取消拖动加载内容的效果。
8.i++，每次加载都会使i的值加1。
9.$('<div>' + i + '</div>').appendTo($('#father'))，向father元素中加载内容。
三.相关阅读:
1.bind()函数可以参阅
jQuery的bind()方法一章节。
2.scroll事件可以参阅j
Query的scroll事件一章节。
3.height()函数可以参阅
jQuery的height()方法一章节。
4.appendTo()函数可以参阅
jQuery的appendTo()方法一章节。
5.document.documentElement.scrollTop可以参阅
document.documentElement.scrollTop浏览器兼容 一章节。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
