将来的你, 肯定会感激现在拼命的自己。
  • jquery
  •  2014.11.07 13:26
  •  418

ajax实现滚动条到底部自动加载数据

步骤:(这里使用jQuery)
1、首先取得内容的高度:
    var contentHeight=$("body").height();//内容高度
2、取得窗口高度,和滚动条顶部的高度,并将二者相加
    var windowHeight=$(window).height();//浏览器窗口高度
    var scrollTopHeight=$(window).scrollTop();//滚动条顶部距离窗口顶部的高度(页面超出窗口的高度)
    var winAndScrollHeight=windowHeight+scrollTopheight;//浏览器窗口高度加上滚动条顶部高度
3、将实际内容的高度跟窗口高度滚动条高度之和进行比较:
  if(winAndScrollHeight==contentHeight){//当相等时代表已经到了页面最底部
    //如果二者之和大于等于内容高度,则调用自动加载,在这里调用加载数据方法
  }else{
    //隐藏进度条
  }

实例代码:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var range = 50;             //距下边界长度/单位px
        var elemt = 500;           //插入元素高度/单位px
        var maxnum = 60;            //设置加载最多次数
        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='border:1px solid tomato;margin-top:20px;color:#ac"+(num%60)+(num%60)+";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>


jQuery提供的插件:

http://designbeep.com/2011/08/12/12-jquery-infinite-scrollingscroll-read-plugins-for-content-navigation/



 钟永标

个人头像


 热门推荐


 热门阅读