常见页面布局-头部固定+自定义滚动条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了常见页面布局-头部固定+自定义滚动条相关的知识，希望对你有一定的参考价值。
做了一个小demo，属于常见的页面布局应用，适用于IE7+,Chrome,safari,Firefox,Opera，其他浏览器没有测试。应该还有很多小问题，不过这里仅仅是一个小demo，如果有发现一些小问题，可以和我交流，互相学习学习。以下是所有代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 7 <style> 8 html,body { 9 height: 100%; 10 overflow: hidden; 11 } 12 body { 13 margin: 0; 14 } 15 #top { 16 width: 100%; 17 height: 80px; 18 background: purple; 19 position: fixed; 20 z-index: 1; 21 } 22 #wrap { 23 width: 100%; 24 height: auto; 25 background: #ccc; 26 position: relative; 27 top: 80px; 28 } 29 .item{ 30 width: 100%; 31 height: 400px; 32 margin: 0 auto; 33 font-family: "Microsoft yahei"; 34 font-size: 100px; 35 text-align: center; 36 line-height: 400px; 37 color: #fff; 38 } 39 .item1{ 40 background: #FFB806; 41 } 42 .item2 { 43 background: #FF4E53; 44 } 45 .item3 { 46 background: #3FB470; 47 } 48 .item4 { 49 background: #08559D; 50 } 51 .item5 { 52 background: #FEE006; 53 } 54 #down { 55 width: 100%; 56 height: 280px; 57 background: #333; 58 } 59 #scroll { 60 width: 15px; 61 height: 100%; 62 position: fixed; 63 right: 0; 64 top: 0; 65 z-index: 100; 66 background: url(image/scrollbg.jpg) repeat-y; 67 } 68 #scrollbar { 69 width: 12px; 70 height: 100px; 71 background: url(image/scrollbar.png) no-repeat; 72 position: absolute; 73 left: 1px; 74 top: 0; 75 } 76 </style> 77 <script> 78 window.onload = function(){ 79 /* 80 IE8以下不支持querySelector选择器，需要处理一下IE兼容性 81 var scroll = document.querySelector(".scroll"); 82 var scrollbar = document.querySelector(".scrollbar"); 83 */ 84 85 var top = document.getElementById("top"); 86 var wrap = document.getElementById("wrap"); 87 var scroll = document.getElementById("scroll"); 88 var scrollbar = document.getElementById("scrollbar"); 89 90 // 计算页面高度 91 var topH = top.offsetHeight; // 80 92 var wrapH = wrap.offsetHeight; // 2280 93 var total = topH + wrapH; // 2360 94 95 // 计算滚动条高度 96 var scrollH = document.body.clientHeight || document.documentElement.clientHeight; // 可视区高度 97 var scrollbarH = scrollbar.offsetHeight; //100 98 99 100 // 滚动条拖拽 101 var downY=barTop=disY=iScale=0; 102 scrollbar.onmousedown = function(event){ 103 104 var e = event || window.event; 105 downY = e.clientY; 106 barTop = parseFloat(getStyle(scrollbar,‘top‘)); 107 108 document.onmousemove = function(event){ 109 110 var e = event || window.event; 111 var nowY = e.clientY; 112 disY = nowY - downY; 113 var rangeY = barTop + disY; 114 if(rangeY <=0){ 115 scrollbar.style.top = 0 + ‘px‘; 116 wrap.style.top = 80 + ‘px‘; 117 }else if(rangeY >= scrollH-scrollbarH){ 118 scrollbar.style.top = scrollH-scrollbarH + ‘px‘; 119 }else{ 120 scrollbar.style.top = rangeY + ‘px‘; 121 iScale = parseFloat(getStyle(scrollbar,‘top‘))/(scrollH-scrollbarH); 122 wrap.style.top = 80 + (80 + scrollH -total)*iScale + ‘px‘; 123 } 124 } 125 document.onmouseup = function(){ 126 document.onmousemove = null; 127 document.onmouseup = null; 128 } 129 return false; 130 } 131 132 // 浏览器窗口重置，需要重新计算滚动条的滚动比例和位置 133 window.onresize = function(){ 134 scrollH = document.body.clientHeight || document.documentElement.clientHeight; 135 scrollbar.style.top = iScale*(scrollH-scrollbarH) + ‘px‘; 136 } 137 } 138 function getStyle(obj,attr){ 139 if(obj.currentStyle){ 140 return obj.currentStyle[attr]; 141 }else{ 142 return getComputedStyle(obj,false)[attr]; 143 } 144 } 145 </script> 146 </head> 147 <body> 148 <header id="top"></header> 149 <section id="wrap"> 150 <div class="item item1">item1</div> 151 <div class="item item2">item2</div> 152 <div class="item item3">item3</div> 153 <div class="item item4">item4</div> 154 <div class="item item5">item5</div> 155 <footer id="down"></footer> 156 </section> 157 158 <!--滚动条设置--> 159 <div id="scroll"> 160 <div id="scrollbar"></div> 161 </div> 162 </body> 163 </html>
源文件链接：http://pan.baidu.com/s/1slMPPaX
以上是关于常见页面布局-头部固定+自定义滚动条的主要内容，如果未能解决你的问题，请参考以下文章