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. ubuntu16.04装MatConvNet

    按matconvnet官网上的步骤来,编译代码的时候会发现编译失败. 参考这条issues 以下是我的解决方案: I use ubuntu16.04 with x64 architecture. I ...

  2. Two-Pointer 之 Run Length Coding (RLC)

    游程编码(Run Length Coding, RLC)是串处理中常见的预处理方法.其写法是典型的双指针(Two-Pointer).下面总结其写法1.输入为一串整数可以不把整数存在数组里

  3. 浅谈：java泛型与dao重用

    在进入今天的主题之前,我们先理解一下什么是泛型: 泛型是java中一种类型,泛型是被参数化的类型. 类型-->class 参数化-->class类型可以是任意参数 泛型存在的意义:泛型可以 ...

  4. 基于 Arduino 的 RFID 识别实验

    http://www.it165.net/embed/html/201512/3287.html 2015年12月04日(周五) 上午  博士的智能卡实验--RFID识别实验,基于51单片机: 我们的 ...

  5. Linux系统下压缩文件时过滤指定的文件 |Linux系统压缩指定文件代码

    进入要压缩的目录: [root@iZ25c748tjqZ wechat]# cd /alidata1/htdocs/wechat/ 查看目录: [root@iZ25c748tjqZ wechat]# ...

  6. boost之lexical_cast

    第一次翻译,虽然是个很简单的函数介绍... 文件boost/lexical_cast.hpp中定义了此函数: namespace boost { class bad_lexical_cast; tem ...

  7. JQuery常用代码汇总

    获取<input />的value $("#id").val( ); 标签间的html $("#id").html('<tr><t ...

  8. 数据导入导出Oracle数据库

    临近春节,接到了一个导入数据的任务,在Linux客户端中的数据有50G,大约3亿3千万行: 刚开始很天真,把原始的txt/csv文件用sh脚本转化成了oralce 的insert into 语句,然后 ...

  9. Bash 是如何从环境变量中导入函数的

    在上文中曾说到: 所谓的环境变量的真实面目其实就是个任意字符串 Bash 在启动时会将 environ 数组中包含 ＝ 号的字符串导入成为自己的变量 Bash 在启动外部命令时会将自己内部标记为环境变 ...

  10. Bash 里的转义序列

    在 Bash 里,一共有五个地方支持反斜杠开头的转义序列,包括两个内部命令 echo 和 printf 的参数里,字符串语法 $'...' 里,还有四个提示符变量 PS1-PS4 里,以及在 Read ...