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. AOJ DSL_2_C Range Search (kD Tree)

    Range Search (kD Tree) The range search problem consists of a set of attributed records S to determi ...

  2. bzoj2503&poj3387[NEERC2006]IdealFrame

    其实只是把别人的题解强行扩写了 写这篇题解之前我不会的预备知识: 欧拉通路:从图中一个点出发不重复地遍历所有边的路径(可以停在另一个点) 欧拉回路:从图中一个点出发不重复地遍历所有边的回路(必须回到出 ...

  3. Graphics绘图闪烁的问题

    加入获取的boardPanel.CreateGraphics()时候 用这个g去g.Clear(BackColor);时候会闪烁. 解决办法:  在绘图的时候 用 绘图的image的Graphics. ...

  4. 【CityHunter】Unity3D设计AR探索模式

    为了增加游戏的乐趣性,我对项目进行了Unity3D的引入,经过一番折腾,终于做出了一个基本的AR探索模式的基本雏形. 途中的小方块就是虚拟物体,因为是静态图片,所以也不能看出什么来,只能文字形容一下: ...

  5. mysql 查询当天的数据库

    时间存储格式是时间戳 SELECT *  FROM 表名  WHERE 时间字段 BETWEEN UNIX_TIMESTAMP( CURDATE( ) )  AND UNIX_TIMESTAMP( N ...

  6. ubuntu14.04 下安装有道词典

    安装步骤 1.ubuntu14.04.1版本下是不能直接安装有道词典的,首先需要把14.04.版升级为14.04.2版. 在终端窗口中输入以下命令: sudo apt-get update sudo ...

  7. js自执行函数注意事项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  9. [NHibernate]并发控制

    目录 写在前面 文档与系列文章 并发控制 乐观并发控制(Optimistic Concurrency) 一个例子 悲观并发控制(Pessimistic Concurrency) 总结 写在前面 上篇文 ...

  10. 关于Spring中的<context:annotation-config/>配置

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...