新航路师徒学院

 找回密码
 立即注册
搜索
查看: 433|回复: 0

【新航路】滚动条到达底部加载更多js 源代码

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 12:30:00 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>滚动条到达底部加载更多</title>
  6.     <meta name="description" content="滚动条到达底部加载更多" />
  7.     <meta name="keywords" content="滚动条到达底部加载更多" />
  8.     <link rel="stylesheet" href="../css/index.css"/>
  9.     <script src="http://statics.daydays.com/lib/js/jquery.js"></script>
  10.     <script src="http://statics.daydays.com/lib/js/base.js"></script>
  11.     <style>
  12.         .k_scroll {width:500px;height:300px;border:1px solid red;overflow-x:hidden;overflow-y:scroll;margin:0 auto;line-height:30px;}
  13.     </style>
  14. </head>
  15. <body style="height:2000px;">
  16. <div class="k_scroll" id="k_id">
  17.     111111111111<br/>
  18.     111111111111<br/>
  19.     111111111111<br/>
  20.     111111111111<br/>
  21.     111111111111<br/>
  22.     111111111111<br/>
  23.     111111111111<br/>
  24.     111111111111<br/>
  25.     111111111111<br/>
  26.     111111111111<br/>
  27.     111111111111<br/>
  28.     111111111111<br/>
  29.     111111111111<br/>
  30.     111111111111<br/>
  31.     111111111111<br/>
  32.     111111111111<br/>
  33.     111111111111<br/>
  34. </div>
  35. <script>
  36.     var doc = document;
  37.     var oDiv = doc.getElementById('k_id');
  38.     function addEvent(obj,type,fn){
  39.         if(!obj){return null;}
  40.         if(obj.addEventListener){
  41.             obj.addEventListener(type,function (ev){
  42.                 var rtn=fn.call(obj,ev);
  43.                 if(rtn==false){
  44.                     ev.cancelBubble=true;
  45.                     ev.preventDefault();
  46.                 }
  47.             },false);
  48.         }else{
  49.             obj.attachEvent('on'+type,function (){
  50.                 var rtn=fn.call(obj,event);
  51.                 if(rtn==false){
  52.                     event.cancelBubble=true;
  53.                     return false;
  54.                 }
  55.             })
  56.         }
  57.     };
  58.     addEvent(oDiv,'scroll',function(){
  59.         var scrollBottom = oDiv.scrollHeight - oDiv.scrollTop - oDiv.clientHeight;
  60.         if(scrollBottom<=0){
  61.             addFn();
  62.         }
  63.     })
  64.     addEvent(window,'scroll',function(){
  65.         var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  66.         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  67.         var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  68.         var scrollBottom =  scrollHeight - scrollTop - clientHeight;
  69.         if(scrollBottom<=0){
  70.             addFn();
  71.         }
  72.     })
  73.     function addFn(){
  74.         alert('1');
  75.     }
  76.     seajs.use('/js/test',function(app){
  77.         app.init()
  78.     })
  79. </script>
  80. </body>
  81. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-9-25 23:05 , Processed in 0.135460 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表