DIV固定高度滚动条滚动最底部，加载新的li

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  7.         <style>
  8.         ul{
  9.             height:500px;
  10.             overflow: auto;
  11.         }
  12.         ul li{
  13.             height:60px;
  14.             line-height:60px;
  15.         }
  16.           ul li:first-child{
  17.               background: #f00;
  18.           }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <ul id="ul">
  23.             <li>的第三季度</li>
  24.             <li>的第三季度</li>
  25.             <li>的第三季度</li>
  26.             <li>的第三季度</li>
  27.             <li>的第三季度</li>
  28.             <li>的第三季度</li>
  29.             <li>的第三季度</li>
  30.             <li>的第三季度</li>
  31.  
  32.             <li>的第三季度结尾</li>
  33.         </ul>
  34.        <script>
  35.                /*屏幕滚动后加载分页*/
  36.             $("#ul").scroll(function(){
  37.                 var nScrollTop=$(this)[0].scrollTop;//滚动条距顶部的高度
  38.                 var nDivHight=$(this).height();//可见区域的高度
  39.                  var nScrollHight= $(this)[0].scrollHeight;//为整个UL的高度（包括屏幕外的高度）
  40.  
  41.                  if(nScrollTop + nDivHight >= nScrollHight){
  42.                     console.log("滚动条到底部了");
  43.                     for(var i=0;i<3;i++){
  44.                         var li=$("<li>我们"+i+"</li>");
  45.                         $("#ul").append(li);
  46.                     }
  47.                 }
  48.             });
  49.        </script>
  50.     </body>
  51. </html>

window固定高度滚动条滚动最底部，加载新的li

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  7.         <style>
  8.         ul li{
  9.             height:60px;
  10.             line-height:60px;
  11.         }
  12.           ul li:first-child{
  13.               background: #f00;
  14.           }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <ul id="ul">
  19.             <li>的第三季度</li>
  20.             <li>的第三季度</li>
  21.             <li>的第三季度</li>
  22.             <li>的第三季度</li>
  23.             <li>的第三季度</li>
  24.             <li>的第三季度</li>
  25.             <li>的第三季度</li>
  26.             <li>的第三季度</li>
  27.             <li>的第三季度</li>
  28.             <li>的第三季度</li>
  29.             <li>的第三季度</li>
  30.             <li>的第三季度结尾</li>
  31.             <li>的第三季度</li>
  32.             <li>的第三季度</li>
  33.             <li>的第三季度</li>
  34.             <li>的第三季度结尾</li>
  35.         </ul>
  36.        <script>
  37.                /*屏幕滚动后加载分页*/
  38.             $(window).scroll(function(){
  39.                     var scrollTop = $(this).scrollTop();//滚动条距离顶部的高度
  40.                 　　var scrollHeight = $(document).height();//获取整个页面的高度
  41.                 　　var windowHeight = $(this).height();//获取当前可见区域的高度
  42.                 　　if(scrollTop + windowHeight == scrollHeight){
  43.                             console.log("滚动条到底部了");
  44.                             for(var i=0;i<3;i++){
  45.                                 var li=$("<li>我们"+i+"</li>");
  46.                                 $("#ul").append(li);
  47.                             }
  48.                 　　}
  49.             });
  50.        </script>
  51.     </body>
  52. </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. Codeforces乱刷集合

    发这篇博客的目的是因为刷了些水题,但又有一些不错的地方可以加以借鉴....然后又不想一个一个发.... Codeforces731A 题目大意:给出一个26个字母的环,初始指向a,可以顺时针转或者逆时 ...

  2. Linux文件类型及如何查看，修改文件读写权限

    现在使用 ls -l 命令,查看详细信息格式的文件列表,您将会看到如下内容: total 5drwxr-x---  4   user group 4096 Mar 10 00:37 filenamed ...

  3. 学习Javascript

    分别归类为: javascript变量 javascript运算符 javascript数组 javascript流程语句 javascript字符串函数 javascript函数基础 javascr ...

  4. MySql 杂记

    1:声明一个int变量时,设置它默认为0,而不是空或null. int 型,取值范围-2,147,483,648 到 2,147,483,647 ,默认值是 0 int是值类型,读内存区间中指定长度单 ...

  5. fedora23的打印服务

    cups: common unix printing system. 是通用的打印服务. whatever 不管什么; whichever: 不管哪个 可以使用 http://localhost:63 ...

  6. Bash 中 SHLVL 变量为 1000 的时候

    SHLVL 环境变量代表 Shell 嵌套执行的深度. $ echo $SHLVL 1 $ bash $ echo $SHLVL 2 $ bash $ echo $SHLVL 3 在 Bash 里,这 ...

  7. codevs1540 银河英雄传说

    描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发战争.泰山压顶集 ...

  8. @property 参数

    /* 1.set方法内存管理相关的参数 * retain : release旧值,retain新值(适用于OC对象类型) * assign : 直接赋值(默认,适用于非OC对象类型) * copy : ...

  9. UVALive 4329 Ping pong

                                      Ping pong Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Fo ...

  10. log4jdbc 使用

    像 hibernate, mybatis 都是不打印真正执行的sql的,所以借助 log4jdbc 打印sql以及统计执行时间是非常方便的. 配置log4jdbc 有很多种方法,比如通过spring的 ...