滚动条自定义
Posted 蛋Mrs炒饭
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条自定义相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 body,ul,dl,dd{ margin:0; padding:0; font-size:12px; font-family:‘微软雅黑‘;} 8 .clear{ zoom:1} 9 .clear:after{ display:block; content:""; clear:both} 10 11 .box{margin:28px auto; width:350px; height:440px; background:#000; padding:8px;} 12 #wrap{ width:324px; height:386px; background:#1c1c1d; overflow:hidden; position:relative; } 13 #listbox{ float:left; width:309px; position:absolute; left:0; top:0; } 14 #scrollbox{ float:right; width:3px; height:386px; background: #333; position:relative;} 15 #scrollbar{ width:3px; height:30px; background:#cc3f2e; position:absolute; left:0; top:0;} 16 17 li{ height:80px; margin-bottom:8px; list-style:none;} 18 .picbox,.div{ float:left;} 19 .picbox{ width:150px; position:relative; } 20 .picbox span{ position:absolute; left:0px; bottom:0px; width:90px; height:22px;} 21 .picbox span.a1{ background:url(img/b.jpg)} 22 .picbox span.a2{ background:url(img/a.jpg)} 23 dl{ width:139px; height:76px; color:#fff; padding:4px 0 0 10px;line-height:18px; position:absolute;left:0; top:0; opacity:0.2; filter:alpha(opacity=20); } 24 .div{width:149px; height:80px; position:relative; } 25 .mark{width:149px; height:80px; position:absolute; top:0; left:0; background:#fff; opacity:0.1; filter:alpha(opacity=10);} 26 27 .nav{ width:324px; height:35px; font-family:‘微软雅黑‘;background:#1c1c1d; padding-top:5px;} 28 .a,.b{ width:152px; height:24px; line-height:24px; background:#666; text-align:center; float:left; color:#fff; cursor:pointer} 29 .a{margin-right:5px; display:inline; background:#333; color:#666; } 30 31 li.active .mark{opacity:0.2; filter:alpha(opacity=20);} 32 li.active dl{ opacity:0.7; filter:alpha(opacity=70);} 33 </style> 34 </head> 35 36 <body> 37 <div class="box"> 38 <div class="nav"> 39 <div class="a">猜你喜欢</div> 40 <div class="b">独家热播</div> 41 </div> 42 <div id="wrap"> 43 <ul id="listbox"> 44 <li class="active"> 45 <div class="picbox"> 46 <img src="img/1.jpg"> 47 <span class="a1"></span> 48 </div> 49 <div class="div"> 50 <div class="mark"></div> 51 <dl class="textbox"> 52 <dt>飞狐外传</dt> 53 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 54 <dd>史上身材最棒狐仙</dd> 55 </dl> 56 </div> 57 </li> 58 <li> 59 <div class="picbox"> 60 <img src="img/2.jpg"> 61 <span class="a2"></span> 62 </div> 63 <div class="div"> 64 <div class="mark"></div> 65 <dl class="textbox"> 66 <dt>飞狐外传</dt> 67 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 68 <dd>史上身材最棒狐仙</dd> 69 </dl> 70 </div> 71 </li> 72 <li> 73 <div class="picbox"> 74 <img src="img/3.jpg"> 75 <span class="a2"></span> 76 </div> 77 <div class="div"> 78 <div class="mark"></div> 79 <dl class="textbox"> 80 <dt>飞狐外传</dt> 81 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 82 <dd>史上身材最棒狐仙</dd> 83 </dl> 84 </div> 85 </li> 86 <li> 87 <div class="picbox"> 88 <img src="img/4.jpg"> 89 <span></span> 90 </div> 91 <div class="div"> 92 <div class="mark"></div> 93 <dl class="textbox"> 94 <dt>飞狐外传</dt> 95 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 96 <dd>史上身材最棒狐仙</dd> 97 </dl> 98 </div> 99 </li> 100 <li> 101 <div class="picbox"> 102 <img src="img/5.jpg"> 103 </div> 104 <div class="div"> 105 <div class="mark"></div> 106 <dl class="textbox"> 107 <dt>飞狐外传</dt> 108 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 109 <dd>史上身材最棒狐仙</dd> 110 </dl> 111 </div> 112 </li> 113 <li> 114 <div class="picbox"> 115 <img src="img/6.jpg"> 116 </div> 117 <div class="div"> 118 <div class="mark"></div> 119 <dl class="textbox"> 120 <dt>飞狐外传</dt> 121 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 122 <dd>史上身材最棒狐仙</dd> 123 </dl> 124 </div> 125 </li> 126 <li> 127 <div class="picbox"> 128 <img src="img/7.jpg"> 129 </div> 130 <div class="div"> 131 <div class="mark"></div> 132 <dl class="textbox"> 133 <dt>飞狐外传</dt> 134 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 135 <dd>史上身材最棒狐仙</dd> 136 </dl> 137 </div> 138 </li> 139 <li> 140 <div class="picbox"> 141 <img src="img/4.jpg"> 142 </div> 143 <div class="div"> 144 <div class="mark"></div> 145 <dl class="textbox"> 146 <dt>飞狐外传</dt> 147 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 148 <dd>史上身材最棒狐仙</dd> 149 </dl> 150 </div> 151 </li> 152 <li> 153 <div class="picbox"> 154 <img src="img/5.jpg"> 155 </div> 156 <div class="div"> 157 <div class="mark"></div> 158 <dl class="textbox"> 159 <dt>飞狐外传</dt> 160 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 161 <dd>史上身材最棒狐仙</dd> 162 </dl> 163 </div> 164 </li> 165 <li> 166 <div class="picbox"> 167 <img src="img/6.jpg"> 168 </div> 169 <div class="div"> 170 <div class="mark"></div> 171 <dl class="textbox"> 172 <dt>飞狐外传</dt> 173 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 174 <dd>史上身材最棒狐仙</dd> 175 </dl> 176 </div> 177 </li> 178 <li> 179 <div class="picbox"> 180 <img src="img/7.jpg"> 181 </div> 182 <div class="div"> 183 <div class="mark"></div> 184 <dl class="textbox"> 185 <dt>飞狐外传</dt> 186 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> 187 <dd>史上身材最棒狐仙</dd> 188 </dl> 189 </div> 190 </li> 191 </ul> 192 <div id="scrollbox"> 193 <div id="scrollbar"></div> 194 </div> 195 </div> 196 </div> 197 </body> 198 <script> 199 200 var listWrap = document.getElementById(‘wrap‘); 201 var listBox = document.getElementById(‘listbox‘); 202 var scrollBox = document.getElementById(‘scrollbox‘); 203 var scrollBar = document.getElementById(‘scrollbar‘); 204 205 var scale = 0, height = 0, maxTop = 0, listMaxTop = 0, t = 0; 206 207 scale = listWrap.clientHeight / listBox.scrollHeight;//滚动条可以滚动的比例 208 209 if(scale>1){scale = 1;} 210 211 height = scale * scrollBox.scrollHeight;//滚动条的高度 212 213 maxTop = scrollBox.scrollHeight - height;//最大可以滚动的大小 214 215 listMaxTop = listWrap.clientHeight - listBox.scrollHeight;//内容可以滚动的最大高度 216 217 if( scale == 1 ){scrollBox.style.display = ‘none‘;}//内容不足，滚动条隐藏 218 219 scrollBar.style.height = height + ‘px‘; 220 221 scrollBar.onmousedown = function(ev){ 222 223 var ev = ev || event; 224 225 var disY = ev.clientY - this.offsetTop;//获取滚动条距离浏览器的竖直距离 226 227 document.onmousemove = function(ev){ 228 229 var ev = ev || event; 230 231 t = ev.clientY - disY;//滚动条距离scrollBox顶部距离 232 233 fnScroll(); 234 235 }; 236 237 document.onmouseup = function(){ 238 document.onmouseup = document.onmousemove = null; 239 }; 240 241 return false; 242 243 }; 244 245 listWrap.onmousewheel = mouseScroll; 246 247 if(listWrap.addEventListener){ 248 listWrap.addEventListener(‘DOMMouseScroll‘,mouseScroll,false); 249 } 250 251 function mouseScroll(ev){ 252 253 var ev = ev || event; 254 var fx = ev.wheelDelta || ev.detail; 255 //当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document(IE)或window(Opera、Chrome、及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息之外，还包含一个特殊的wheelDelta属性。当用于向前滚动鼠标滚轮是，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮是，wheelDelta是-120的倍数，datial适用于火狐浏览器且向下滚动是整数，想上滚动是负数，与谷歌浏览器的显示方式是相反的 256 257 var bDown = true; 258 259 if( ev.detail ){ 260 bDown = fx > 0 ? true : false; 261 }else{ 262 bDown = fx > 0 ? false : true; 263 } 264 265 if( bDown ){ 266 t += 10; 267 }else{ 268 t -= 10; 269 } 270 271 fnScroll(); 272 273 if( ev.preventDefault ){ 274 ev.preventDefault(); 275 } 276 277 return false; 278 } 279 280 function fnScroll(){ 281 282 if(t < 0 ){t = 0;} 283 if(t > maxTop){t = maxTop;} 284 285 var scale = t / maxTop;//滚动条滚动的比例 286 var listTop = scale * listMaxTop;//内容应移动的距离 287 288 scrollBar.style.top = t + ‘px‘; 289 listBox.style.top = listTop + ‘px‘; 290 291 } 292 293 294 </script> 295 </html>
ps：摘自妙味论坛
以上是关于滚动条自定义的主要内容，如果未能解决你的问题，请参考以下文章