在实际项目中，经常由于浏览器自带的滚动条样式太戳，而且在各个浏览器中显示不一样，所以我们不得不去实现自定义的滚动条，今天我就用最少的代码实现了一个自定义滚动条，代码量区区只有几十行，使用起来也非常方便。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自定义滚动条</title><style type="text/css">body,ul,dl,dd{margin:0; padding:0; font-size:12px; font-family:'微软雅黑';}.clear{zoom:1}.clear:after{display:block; content:""; clear:both}.box{margin:28px auto; width:164px; height:440px; background:#000; padding:8px;}#wrap{width:170px; height:386px; background:#1c1c1d; overflow:hidden; position:relative; }#listbox{float:left; width:160px; position:absolute; left:0; top:0; }#scrollbox{float:right; width:3px; height:386px; background: #333; position:relative;}#scrollbar{width:3px; height:30px; background:#cc3f2e; position:absolute; left:0; top:0;}li{height:80px; margin-bottom:8px; list-style:none;}.picbox,.div{float:left;}.picbox{width:150px; position:relative; }.picbox span{position:absolute; left:0px; bottom:0px; width:90px; height:22px;}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); }.div{width:149px; height:80px; position:relative; }.mark{width:149px; height:80px; position:absolute; top:0; left:0; background:#fff; opacity:0.1; filter:alpha(opacity=10);}.nav{width:160px; height:35px; font-family:'微软雅黑';background:#1c1c1d; padding-top:5px;}.a,.b{width:152px; height:24px; line-height:24px; background:#666; text-align:center; float:left; color:#fff; cursor:pointer}.a{margin-right:5px; display:inline; background:#333; color:#666; }li.active .mark{opacity:0.2; filter:alpha(opacity=20);}li.active dl{opacity:0.7; filter:alpha(opacity=70);}</style></head><body><div class="box"><div class="nav"><div class="a">猜你喜欢</div></div><div id="wrap"><ul id="listbox"><li class="active"><div class="picbox"><span class="a1"></span></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"><span class="a2"></span></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"><span class="a2"></span></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"><span></span></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li><li><div class="picbox"></div><div class="div"><div class="mark"></div><dl class="textbox"><dt>飞狐外传</dt><dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd><dd>史上身材最棒狐仙</dd></dl></div></li></ul><div id="scrollbox"><div id="scrollbar"></div></div></div></div></body><script src="tinyScroll.js"></script><script>new tinyScroll({wrapBox : document.getElementById('wrap'),wrapList : document.getElementById('listbox'),scrollBox :document.getElementById('scrollbox'),scrollBar : document.getElementById('scrollbar')})</script></html>
View Code
然后引入滚动条插件：
/*** javascript自定义滚动条(滚动条高度可以动态改变)* @param opts* 调用方式* new tinyScroll({wrapBox : document.getElementById('wrap'),wrapList : document.getElementById('listbox'),scrollBox :document.getElementById('scrollbox'),scrollBar : document.getElementById('scrollbar')})*/function tinyScroll(opts) {this.wrapBox = opts.wrapBox;this.wrapList = opts.wrapList;this.scrollBox = opts.scrollBox;this.scrollBar = opts.scrollBar;this.scale = 0;this.height = 0;this.maxTop = 0;this.ListMaxTop = 0;this.top = 0;this.bindEvent();}tinyScroll.prototype = {constructor: tinyScroll,init: function() {this.scale = this.wrapBox.clientHeight / this.wrapList.scrollHeight;if (this.scale > 1) this.scale = 1;this.height = this.scale * this.scrollBox.scrollHeight;this.maxTop = this.scrollBox.scrollHeight - this.height;this.ListMaxTop = this.wrapBox.clientHeight - this.wrapList.scrollHeight;if (this.scale == 1) this.scrollBox.style.display = 'none';this.scrollBar.style.height = this.height + 'px';},bindEvent: function() {var that = this;var mouseScroll = function(ev) {ev = ev || event;var fx = ev.wheelDelta || ev.detail;var bDown = true;if (ev.detail) {bDown = fx > 0 ? true: false;} else {bDown = fx > 0 ? false: true;}if (bDown) {that.top += 10;} else {that.top -= 10;}that.fnScroll();if (ev.preventDefault) {ev.preventDefault();}return false;};this.init();this.scrollBar.onmousedown = function(ev) {ev = ev || event;var disY = ev.clientY - this.offsetTop;document.onmousemove = function(ev) {ev = ev || event;that.top = ev.clientY - disY;that.fnScroll();};document.onmouseup = function() {document.onmouseup = document.onmousemove = null;};return false;};this.wrapBox.onmousewheel = mouseScroll;if (this.wrapList.addEventListener) {this.wrapList.addEventListener('DOMMouseScroll', mouseScroll, false);}},fnScroll: function() {if (this.top < 0) this.top = 0;if (this.top > this.maxTop) this.top = this.maxTop;var scale = this.top / this.maxTop;var listTop = scale * this.ListMaxTop;this.scrollBar.style.top = this.top + 'px';this.wrapList.style.top = listTop + 'px';}};
将所贴代码复制到编辑器中进行预览吧，是不是感觉特酷！
这里的滚动条样式你想设计成那样都行，给予你充分的发挥空间，是不是感觉挺爽！
