[关闭]
@15013890200 2018-08-20T20:42:29.000000Z 字数 3383 阅读 639

css布局 + 滚动加载

css 布局 javascript

  • 之前在整理vue组件框架的时候，发现自己对页面整体方面的布局上还是很薄弱，尤其是在页面整体高度自适应的时候，页面内容撑开，左边的导航栏并没有及时的随之撑开。当时落入了一个误区，以为设置导航栏div高度为auto或者为100%就可以自适应。其实并没有达到一丝效果。于是抽空就自己重新试着布局，终于试探出只用css就可以达到高度自适应。happy！
  • 同时也做了滚动加载实验。（之前一直都是翻页请求加载数据，一直没有做过滚动加载）数据是模拟ajax请求得到的数据。最大加载数据写死为102,当为102后，显示没有更多。
  • 也做了滚动到顶部

代码部分

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>cssTest</title>
  6.     <style type="text/css">
  7.         *{margin: 0;padding: 0;}
  8.         html,body{height: 100%;}
  9.         .head{width: 100%;height: 60px;background-color: #3896f8;line-height: 60px;font-size: 18px;color: #fff;text-align: center;}
  10.         .body{width: 100%;min-height: 883px;box-sizing: content-box;overflow: hidden;background-color: #efefef;position: relative;}
  11.         .nav{width: 200px;background-color: #222D43;float: left;overflow-y: auto;position: absolute;top: 0;left: 0;bottom: 0;}
  12.         .crumb{position: absolute;top: 10px;left: 220px;color: #666}
  13.         .contain{width: auto;background-color: #fff;box-sizing: content-box;padding: 20px;margin-top: 40px;margin-left: 220px;margin-right: 20px; min-height: 763px; }
  14.         .footer{height: 40px;width: auto;line-height: 40px;text-align: center;margin-left: 220px;color: #666;}
  15.         .div_item{width: 100%;height: 80px;margin-bottom: 20px;border:1px solid #ddd;transition: background 0.3s;}
  16.         .div_top{padding:5px 14px;line-height: 50px;text-align: center;color: #666;box-shadow: 0 0 3px #ddd;position: fixed;bottom: 20px;right: 10px;background-color: #ddd;cursor: pointer;transition: box-shadow 0.3s,padding 0.3s,bottom 0.3s,right 0.3s,visibility 0.3s;visibility: hidden;}
  17.         .div_top:hover{box-shadow: 0 0 5px #666;padding: 6px 15px!important;bottom: 19px;right: 9px;}
  18.     </style>
  19. </head>
  20. <body>
  21. <div class="head">页面布局测试</div>
  22. <div class="body">
  23.     <div class="nav"></div>
  24.     <div class="crumb">crumb</div>
  25.     <div class="contain">
  26.         <div id="contain">          
  27.         </div>
  28.     </div>
  29.     <div class="div_top" onclick="goTop()">顶部</div>
  30.     <div class="footer">copyright@wangjun</div>
  31. </div>
  32. </body>
  33. <script type="text/javascript">
  34.     var index = 0;//数据索引
  35.     var arr = [];//数据数组
  36.     var bottom = 0;//contain底边偏移量
  37.     var clientH = document.documentElement.clientHeight || document.body.clientHeight;//浏览器底边偏移量
  38.     var timeout = null;//定时任务 滚动加载时用到
  39.     var scrollT = document.body.scrollTop;
  40.     var showTop = false;
  41.     function add(){
  42.         /** 模拟ajax获取数据 */
  43.         for(var i = 0; i < 10; i++){
  44.             index ++;
  45.             append(index);
  46.             arr.push(index);
  47.         }
  48.     }
  49.     function append(i){
  50.         /** 将节点注入到contain */
  51.         if(i > 102){
  52.             if(document.getElementById('contain').lastChild.nodeName !== 'P'){
  53.                 var p = document.createElement('p');
  54.                 p.innerText = '没有更多了';
  55.                 document.getElementById('contain').appendChild(p);
  56.             }
  57.             return;
  58.         }
  59.         var dom = document.createElement('div');
  60.         dom.setAttribute('class','div_item');
  61.         dom.innerText = i;
  62.         document.getElementById('contain').appendChild(dom);
  63.     }
  64.     add();
  65.     function getContainPosition(){
  66.         /** 判断contain底边框距离浏览器底边的距离，以此判断是否需要发起请求 */
  67.         var cont = document.getElementById('contain');
  68.         bottom = cont.getBoundingClientRect().bottom;
  69.         return clientH-bottom;
  70.     }
  71.     function goTop(){
  72.         /** 滚动到顶部+滚动特效 */
  73.         var top = document.documentElement.scrollTop || document.body.scrollTop;
  74.         var height = top/80;
  75.         var time = setInterval(function(){
  76.             window.scrollBy(0,-height);
  77.             if(document.documentElement.scrollTop <= 0){
  78.                 clearInterval(time);
  79.             }
  80.         },1);
  81.     }
  82.     window.onscroll = function(){
  83.         /** 监听页面滚动事件 */
  84.         timeout = setTimeout(function(){
  85.             var dis = getContainPosition();
  86.             var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
  87.             if(scrollT > 200 && !showTop){
  88.                 document.querySelector('.div_top').style.visibility = 'visible';
  89.                 showTop = true;
  90.             }
  91.             if(scrollT < 200 && showTop){
  92.                 document.querySelector('.div_top').style.visibility = 'hidden';
  93.                 showTop = false;
  94.             }
  95.             if(dis > -20){  
  96.                 add();
  97.                 clearTimeout(timeout);
  98.             }
  99.         },1500);    
  100.     }
  102. </script>
  103. </html>

效果

页面刚开始效果
55bc7e057fc1e3a5c714220605dfdc2.png-67.1kB

滚动加载几轮之后
38f4e06017f7ad19059954cd6d7c5d1.png-77.3kB

加上滚动到顶部效果
0415caadc1a1248e08a3027ba07d498.png-64.3kB

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注