javascript实现 滚动条滚动 加载内容
说明：自从Bing搜索实现 滚动加载内容后，google,baidu都实现了类似的功能。
步骤 1： 打开Visual Studio 2010 ，新建项目www.scrollpage.com.
步骤 2：添加一个HTML文件，命名：ScrollLoadPage.html，项目引用了Jquery1.8.2框架
步骤 3：添加代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
div#Loadding { text-align: center; margin-top: 10px; display: none; font-weight: bold; color:Red; }
div.content { width: 100%; height: 900px; border-bottom: 1px solid gray; font-weight: bold; color:Red;text-align: center;}
</style>
<script type="text/javascript">
if (!NeuF) var NeuF = {};
NeuF.ScrollPage = function (obj, options, callback) {
var _defaultOptions = { delay: 500, marginBottom: 100 }; //默认配置：延迟时间delay和滚动条距离底部距离marginBottom
options = $.extend(_defaultOptions, options);
this.isScrolling = false; //是否在滚动
this.oriPos = 0; //原始位置
this.curPos = 0; //当前位置
var me = this; //顶层
var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);
//绑定滚动事件
$obj.scroll(function (ev) {
me.curPos = $obj.scrollTop();
if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {
if (me.isScrolling == true) return;
me.isScrolling = true;
setTimeout(function () { me.isScrolling = false; }, options.delay); //重复触发间隔毫秒
if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);
};
me.oriPos = me.curPos;
});
};
$(function () {
window.scrollTo(0, 0); //每次F5刷新把滚动条置顶
//marginBottom表示滚动条离底部的距离，0表示滚动到最底部才加载，可以根据需要修改
new NeuF.ScrollPage(window, { delay: 1000, marginBottom: 0 }, function (offset) {
if (offset > 0) {
$("#Loadding").show(); //加载提示
setTimeout(function () {
//这里就是异步获取内容的地方，这里简化成一句话，可以根据需要修改
$("#divContainer").append($("<div class='content'>第“" + ($(".content").size() + 1) + "”页内容</div>"));
//内容获取后，隐藏加载提示
$("#Loadding").hide();
}, 1000);
}
});
});
</script>
</head>
<body>
<div id="divContainer">
<div class="content">
这里是内容，尝试滚动，加载下一页内容。如果是大屏幕显示器，<br />请把CSS div.content 高度调高，以便看到滚动效果 </div>
</div>
<div id="Loadding">
正在加载，请稍候 ...</div>
</body>
</html>
步骤 4： 在浏览器中查看ScrollLoadPage.html。
下面给出了项目源码 ：
https://files.cnblogs.com/HCCZX/www.scrollpage.com.rar
