码迷,mamicode.com
首页 > Windows程序 > 详细

div滚动底部加载li,window滚动底部加载li

时间:2016-08-22 21:26:03      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:

DIV固定高度滚动条滚动最底部,加载新的li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <style>
        ul{
            height:500px;
            overflow: auto;
        }
        ul li{
            height:60px;
            line-height:60px;
        }
          ul li:first-child{
              background: #f00;
          }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
          
            <li>的第三季度结尾</li>
        </ul>
       <script>
               /*屏幕滚动后加载分页*/
            $("#ul").scroll(function(){
                var nScrollTop=$(this)[0].scrollTop;//滚动条距顶部的高度
                var nDivHight=$(this).height();//可见区域的高度
                 var nScrollHight= $(this)[0].scrollHeight;//为整个UL的高度(包括屏幕外的高度)

                 if(nScrollTop + nDivHight >= nScrollHight){
                    console.log("滚动条到底部了");
                    for(var i=0;i<3;i++){
                        var li=$("<li>我们"+i+"</li>");
                        $("#ul").append(li);
                    }
                }
            });
       </script>
    </body>
</html>

window固定高度滚动条滚动最底部,加载新的li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <style>
        ul li{
            height:60px;
            line-height:60px;
        }
          ul li:first-child{
              background: #f00;
          }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度结尾</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度</li>
            <li>的第三季度结尾</li>
        </ul>
       <script>
               /*屏幕滚动后加载分页*/
            $(window).scroll(function(){
                    var scrollTop = $(this).scrollTop();//滚动条距离顶部的高度
                  var scrollHeight = $(document).height();//获取整个页面的高度
                  var windowHeight = $(this).height();//获取当前可见区域的高度
                  if(scrollTop + windowHeight == scrollHeight){
                            console.log("滚动条到底部了");
                            for(var i=0;i<3;i++){
                                var li=$("<li>我们"+i+"</li>");
                                $("#ul").append(li);
                            }  
                  }
            });
       </script>
    </body>
</html>

 

div滚动底部加载li,window滚动底部加载li

标签:

原文地址:http://www.cnblogs.com/binmengxue/p/5796822.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!