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. mui事件绑定和可以用的js dom操作方法

    <script> //事件绑定 对象 方法 子元素 回调函数 mui('body').on('shown', '.mui-popover', function(e) { //console ...

  2. GitHub 上 57 款最流行的开源深度学习项目

    转载:https://www.oschina.net/news/79500/57-most-popular-deep-learning-project-at-github GitHub 上 57 款最 ...

  3. HCTF时PHP WAF然有RLFI漏洞

    tips:from菜鸡队长 这次去打HCTF决赛,用了这个自己写的WAF,web基本上没被打,被打的漏洞是文件包含漏洞,这个功能在本人这个waf里确实很是捉急,由于只是简单检测了..和php[35]{ ...

  4. Introduction - SNMP Tutorial

    30.1 Introduction In addition to protocols that provide network level services and application progr ...

  5. Matlab中double,im2double,mat2gray区别

    转载:http://blog.sina.com.cn/s/blog_6c41e2f30101559d.html ****************假设某图像数据A(uint8格式)*********** ...

  6. [NHibernate]事务

    目录 写在前面 文档与系列文章 事务 增删改查 总结 写在前面 上篇文章介绍了nhibernate的增删改查方法及增加修改操作,这篇文章将介绍nhibernate的事务操作. SQL Server中的 ...

  7. [Machine Learning & Algorithm] 随机森林（Random Forest）

    1 什么是随机森林? 作为新兴起的.高度灵活的一种机器学习算法,随机森林(Random Forest,简称RF)拥有广泛的应用前景,从市场营销到医疗保健保险,既可以用来做市场营销模拟的建模,统计客户来 ...

  8. Linux网络下载命令 wget 简介

    wget 是一个命令行的下载工具.对于我们这些 Linux 用户来说,几乎每天都在使用它.下面为大家介绍几个有用的 wget 小技巧,可以让你更加高效而灵活的使用 wget. $ wget -r -n ...

  9. ReactiveCocoa源码拆分解析(六)

    (整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) RAC为了实现优雅的信号绑定,可谓使尽浑身解数,不仅 ...

  10. CentOS 安装tomcat 7

    安装环境:CentOS-6.3 安装方式:源码安装 软件:apache-tomcat-7.0.29.tar.gz 下载地址:http://tomcat.apache.org/download-70.c ...