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

{app.params.name}} {app.params.name}} {app.params.name}}

先来看看代码:

<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>

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

有人评论说

把偏移再加70将达到更好的滚动到底部再加载的效果。如下:(srollPos + dbHiht) >= (mainHiht-range+70)

有问题的可以尝试一下




版权声明

davidzhang 创作并维护的 Gowhich 博客采用 创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 Gowhich 博客( https://www.gowhich.com ),版权所有,侵权必究。

本文永久链接: https://www.gowhich.com/blog/257

comments powered by Disqus