首页 > 代码库 > 滚动条自定义
滚动条自定义
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：摘自妙味论坛
滚动条自定义
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。