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

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>

 

posted @ 2016-08-22 19:56  归尘2016  阅读(1563)  评论(0)  编辑  收藏  举报