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. struts2 s:file标签使用及文件上传例子

      <s:form action="uploadaction" method="post" enctype="multipart/form-da ...

  2. 每日学习笔记：js中可以直接用id名调用的问题？

    在JavaScript中,标准的id选择器调用语法是: document.getElementById('myid').style.width = pc + "%"; 但是,今天发 ...

  3. System.Properties和System.getenv区别

    网上很多使用的是getProperties.说获得系统变量,但是其实不正确.getProperties中所谓的"system properties"其实是指"java s ...

  4. width的数值为百分比

    对于width的数值为百分比的时候,表示该元素的长度是相对于父容器来算的. 对于padding-right和padding-left比较好理解也是相对于父容器来算的,但容易出错的是padding-to ...

  5. Linux下忘记MySQL的root密码的解决方法

    恢复方法之一 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也 ...

  6. http_build_query 的一个问题

    当我们使用CURL来post数据的时候,需要设置post的数据 curl_setopt($c, CURLOPT_POSTFIELDS, $post_data); 假如这里的$data是 $data = ...

  7. Shell入门教程：Shell的基本结构

    shell程序的基本组成结构 shell结构大体是由设定变量.内置命令.shell的语法结构.函数组成. 使用实例说明:test.sh #!/bin/bash #说明使用/bin/bash作为这个脚本 ...

  8. Android四大组件知识整理

    1. Activity 1.1 什么是Activity? Activity是Context的子类,并可以处理与窗体用户的事件: 1.2 Activity的生命周期 不存在->`onCreate( ...

  9. migration integer limit option

    https://gist.github.com/stream7/1069589 :limit Numeric Type Column Size Max value 1 tinyint 1 byte 1 ...

  10. 听说你们要开始学C了

    同学们好: 先自我介绍一下,我是你们的助教吴喆(厚颜无耻地要求大家叫我吉吉老师:-D),本科学的电子,所以陆陆续续接触了不少C/C++的工作,曾经被编码折磨得死去活来,如今却对其念念不舍,颇有点“斯德 ...