首页 > WEB前端 > jQuery > 正文


如何使用jQuery的ajax实现滚动条滚动到l浏览器底部自动加载

02-12 22:46:50   来源:admin   评论: 点击:

如何使用jQuery的ajax实现滚动条滚动到l浏览器底部自动加载数据
原理图:

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

先面是实例代码:

<!DOCTYPE=html>
<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 = 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/

相关热词搜索:jquery ajax 自动加载

上一篇:jQuery返回顶部代码 下一篇:jQuery控制图片水平垂直居中方法
分享到: 收藏