滚动条下拉自动加载内容 - 仿QQ空间 - 随笔

滚动条下拉自动加载内容 - 仿QQ空间

先来看看代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

   <script type="text/javascript">
    $(document).ready(function(){
        var range = 50;             //距下边界长度/单位px
        var elemt = 500;           //插入元素高度/单位px
        var maxnum = 3;            //设置加载最多次数
        var num = 0;
        $(window).scroll(function(){
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)
            var dbHiht = $("body").height();          //页面(约等于窗体)高度/单位px
            var main = $("#try");                         //主体元素
            var mainHiht = main.height();               //主体元素高度/单位px

            if((srollPos + dbHiht) >= (mainHiht-range) && num != maxnum){
                main.append("<div style='height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");
                num++;
            }
        });
    });
    </script>
</head>
<body>
    <div id="try" style="height:960px">
        <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>
    </div>
</body>
</html>

原理很简单，通过注释可以很清楚是怎么实现的。

有人评论说