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的更多相关文章

  1. 实现winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部

    判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为DataGridView控件添加Scroll事件,然后写入以下代码就可以了,应用范围:可实现分部加载数据 ...

  2. winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部 z

    http://www.zuowenjun.cn/post/2015/05/20/162.html 判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为Dat ...

  3. 判断DataGridView滚动条是否滚动到当前已加载的数据行底部

    private void dataGridView1_Scroll(object sender, ScrollEventArgs e) {   if (e.ScrollOrientation == S ...

  4. PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  5. 移动端页面 弹出框滚动，底部body锁定，不滚动 / 微信网页禁止回弹效果

    需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...

  6. iframe,window,滚动栏的一些问题

    1.Iframe不显示边框:frameborder=0 2.Iframe不显示横向滚动栏:在iframe所指向的页面增加: <style> html{overflow-x:hidden;} ...

  7. web自动化，下拉滚动到底部/顶部和下拉滚动到指定的元素

    在web自动化,经常会遇到页面显示内容太多的时候,页面就会出现滚动条,一般有两种方式进行下拉,一种是直接下拉到底部/顶部/中部,或者直接给定元素,直接下拉到指定元素的位置. 两种方式的共同点: 两种方 ...

  8. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. 理解javascript this指向

    匿名函数中的this指向window对象 这句话很经典: 每个函数在调用时,其活动对象都会自动获取两个特殊的变量:this和arguments.内部函数在搜索这两个变量时,只会搜到其活动对象为止,因此 ...

  2. eclipse发布web项目到生产环境的方式汇总（tomcat）

    参考: http://www.cnblogs.com/xiohao/p/3689832.html http://www.111cn.net/jsp/J2EE-EJB/90337.htm 我收集了几点: ...

  3. Javascript知识点记录（三）设计模式

    Javascript设计模式记录,这个方面确实是没写过,工作中也没有用到js设计模式的地方. prototype与面向对象取舍 使用prototype原型继承和使用面向对象,都可以实现闭包的效果.那么 ...

  4. Python * 和 ** 参数问题

    Problem def calcuate(*keys) def calcluate(**keys) Slove *: 用来传递人一个无名字的参数,这些参数会以一个Tuple的形式来访问. **: 用来 ...

  5. wcf第4步之原生调用简单封装

    public interface IDemoServiceChannel : IDemoService, System.ServiceModel.IClientChannel { } public p ...

  6. 解析Java类和对象的初始化过程

    类的初始化和对象初始化是 JVM 管理的类型生命周期中非常重要的两个环节,Google 了一遍网络,有关类装载机制的文章倒是不少,然而类初始化和对象初始化的文章并不多,特别是从字节码和 JVM 层次来 ...

  7. 深入理解springAOP

    概念:AOP(Aspect-Oriented Programming)即面向切面编程.它是对传统的OOP(面向对象)编程的一种补充,在OOP中往往一个对象有什么行为我们就定义什么方法,对象与对象之间存 ...

  8. MonoGame教程

    http://www.gamefromscratch.com/page/MonoGame-Tutorial-Series.aspx http://rbwhitaker.wikidot.com/mono ...

  9. SDK 支付

    充值:用什么买什么 MSDK: Q点:百科 http://baike.baidu.com/link?url=Dw8ySUIvv6AAprULG_wnI7Mst61gG4bO2qzfpfi1j9xx6c ...

  10. EF 增删改

    一.新增 UserInfo user = new UserInfo() { UserName = "jamsebing", UserPass = " }; db.User ...