javascript实现滚动条滚动加载内容-CSDN博客

说明：自从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>