本文的核心是检测滚动条的滑动：
1.是否滚动到底部？
2.上滚动还是下滚动？
怎样检测浏览器是否滚动到底部？
需要检测3个值：scrollTop（滚动区顶部到可视区顶部的距离），clientHeight（可视区高度），scrollHeight（滚动区总高度），下图很好的解释了各自位置：
下面代码分别获取上述三个属性值：
1 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 2 var clientHeight = document.documentElement.clientHeight; 3 var scrollHeight = document.body.scrollHeight;
当这三个值获取到之后，通过下面代码计算差值来判断是否到底：
1 if (scrollTop >= scrollHeight - clientHeight ) { 2 alert("到底！"); // 滚动到底部啦！！ 3 }
当然，实际应用中并不是滚动到底部才开始加载数据，这样就慢了一拍，常用的判断是快滚动到底部了就开始加载数据，那就设一个值吧，比如：离滚动条底部还差200px的时候就开始加载数据：
1 if (scrollTop >= bodyHeight - clientHeight - 200 ) { 2 3 alert("据底部200px"); // 离底部还有200px！赶紧加载新数据吧！ 4 5 }
上面就是滚动条检测的方法，其基本原理很简单，让哪个容器滚动就获取那个容器的scrollTop，clientHeight，scrollHeight即可，这里需要注意的是：在该容器的css代码中千万不要overflow:hidden;这样滚动条就不会出现了，overflow值要为auto或scroll。而我们要做的是无限滚动，也就是说在检测到底时添加新数据，公司代码一般会在此时发送ajax请求，本文后续的demo中就用插入新元素节点的方式代替吧。
怎样检测浏览器是上滚动还是下滚动？
这里需要引入一个临时变量temp来保存scrollTop的值，其核心思想是：当滚动时scrollTop是时刻更新的，往下滚动scrollTop增加，网上滚动scrollTop减小，把scrollTop赋给临时变量temp，然后用最新的scrollTop值与temp（旧的scrollTop值）比较大小，大于temp则上滚动，否则下滚动：
1 var temp = 0; 2 window.onscroll=function (){ 3 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 4 var clientHeight = document.documentElement.clientHeight; 5 var scrollHeight = document.body.scrollHeight; 6 7 if (scrollTop <= temp) //起初只能下滚动，判断scrollTop小于则为向上滚动 8 { 9 console.log("你在往上滚！"); 10 } 11 else 12 { 13 console.log("你在往下滚！"); 14 } 15 temp = scrollTop; //最关键的一句代码，时刻更新temp的值 16 };
你看，原理就是这么简单。
实例效果
下面用jquery来实现一个类似效果的demo（目前还是不知道博客园中怎么开通“运行代码”功能，所以先上代码吧）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无限滚动加载</title>
<script type="text/javascript" src="./jquery-1.7.2.js"></script>
<script type="text/javascript" src="./chajian.js"></script>
<style type="text/css" rel="stylesheet">
*{margin: 0;padding: 0;}
#main {background-color: green;height: 900px; margin: 0 auto; overflow: auto; 800px;}
#message{ 250px; height:100px;background-color: orange;position: fixed;top:0px;left:1080px;font-size: 20px;text-align: center;}
li { background-color: purple; 500px;height: 100px; margin-top: 10px;color: #fff;font-size: 40px;text-align: center; list-style: none;line-height: 100px;}
</style>
<script type="text/javascript">
$(function () {
var num = 10;//创建新li的序列号初始值
var temp = 0;//为判断上下滚动设置的临时参考值
$("#main").scroll(function () {
var scrollTop = $(this).scrollTop();
var clientHeight = $(this).height();
var bodyHeight = $(this).prop("scrollHeight"); // 或$(this)[0].scrollHeight;或$(this).get(0).scrollHeight;
if (scrollTop <= temp) //起初只能下滚动，判断scrollTop小于则为向上滚动
{
$("#message").html("上滚动！<br> scrollTop:"+scrollTop+"px<br/>"+"temp:"+temp+"px");
}
else
{
$("#message").html("下滚动！<br> scrollTop:"+scrollTop+"px<br/>"+"temp:"+temp+"px");
}
temp = scrollTop; //最关键的一句代码，时刻更新参考temp的值
if (scrollTop >= bodyHeight - clientHeight-10 ) {
//也可在此处设置延迟，让用户更清晰的感到加载的瞬间，但在IE下会出现多次加载的问题
/*setTimeout(function () {
longer();
}, 300);*/
longer();
}
});
//滚动到底部时执行，创建新结点插入到ul中
function longer() {
for (var i = 0; i < 10; i++) {
num++; //更新li标签序号
$("ul").append("<li>" + num + "</li>");
}
}
})
</script>
</head>
<body>
<div id="message">滚动信息</div>
<div id="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>
封装成插件
其实没必要封装成插件，这样做的目的只是为了练练手，毕竟自己还没写过像样的插件，想了一下，该插件就命名为scrollToBottom.js，用法为 $("XX").scrollToBottom(200 , function(){........})。第一个参数200为距离底部的距离，第二个参数就是到底部要执行函数，当然也可只传入一个函数作为参数，那就默认滚动条完完全全滚动到底部才执行函数。下面是scrollToBottom.js源码，很少很简单，见笑啦：
;(function($){ //ps: 为什么开头要加分号? 是防止代码压缩合并后因没有;而出错 $.fn.extend({ "scrollToBottom" : function(distance,fn){ if(arguments.length === 1) { fn = arguments[0]; distance = 0; } $(this).scroll(function(){ var scrollTop = $(this).scrollTop(); var clientHeight = $(this).height(); var bodyHeight = $(this).prop("scrollHeight"); if (scrollTop >= bodyHeight - clientHeight - distance){ fn&&fn(); } }); } }); })(jQuery)
引入插件，这样用起来就方便多了：
$("#main").scrollToBottom(200,function(){
console.log("距离底部还有200px，想干什么就在这个函数里写吧！");
//longer();
});
专业插件推荐：jquery.nicescroll.js
nicescroll.js是款专业的滚动条插件，简单易用，对导航条进行了美化，缓冲减速，全屏等特效，用法为：
$('#main').niceScroll({
cursorcolor:"orange", //控制滚动条颜色
cursor"10" , //控制滚动条宽度，默认5px
scrollspeed:90, //滚动速度，默认60
mousescrollstep: 40, //滚轮速度，默认40
cursorborder: "2px solid red", //滚动条边框
cursorborderradius:"15px",//圆角
//touchbehavior:true, //拖拽主页滑动
boxzoom:true //放大全屏
});
关于此插件的详细用法请点击这里，英语不要太差哦 。
（完）