在开发项目中，经常会用到自定义的滚动条效果，结合鼠标的滚轮事件做到非常绚的效果，具体代码如下，供大家参考：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定义滚动条</title> <style type="text/css"> #container { width: 300px; height: 400px; border: solid 1px grey; margin: 0 auto; position: relative; overflow: hidden; } #div1 { width: 280px; position: absolute; left: 0; } #div2 { width: 20px; height: 400px; background-color: #999; position: absolute; right: 0; } #div3 { width: 20px; height: 20px; background-color: red; position: absolute; left: 0; top: 0; cursor: pointer; } </style> </head> <body> <div id="container"> <div id="div1"> 相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。 IE下的滚动条样式 IE是最早提供滚动条的样式支持，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。 这些样式规则很简单： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/ scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/ scrollbar-track-color: color; /*立体滚动条背景颜色*/ scrollbar-base-color: color; /*滚动条的基色*/ 大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。 这里，很久以前danger做了个基于Flash的可视化工具，简单但是好用选中CSS选项即可自动生成CSS样式，这里不再过多的介绍了。嗯，多谢大猫老湿推荐。 webkit的自定义滚动条样式 yes，这里才是今天要重点介绍的。 从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。 webkit最近实现了对滚动条的支持，先看一个简单的demo： </div> <div id="div2"> <div id="div3"></div> </div> </div> <script type="text/javascript" charset="utf-8"> var oContainer = document.getElementById("container"), oDiv1 = document.getElementById("div1"), oDiv2 = document.getElementById("div2"), oDiv3 = document.getElementById("div3"); oDiv3.onmousedown = function(e) { e = e || event; var disY = e.clientY - this.offsetTop; if(oDiv3.setCapture){ oDiv3.οnmοusemοve=fnMove; oDiv3.οnmοuseup=fnUp; oDiv3.setCapture(); }else{ document.οnmοusemοve=fnMove; document.οnmοuseup=fnUp; } function fnMove(ev) { ev = ev || event; var t = ev.clientY - disY; setTop(t); }; function fnUp() { this.onmousemove = null; this.onmouseup = null; if(this.releaseCapture){ this.releaseCapture(); } }; return false; }; function setTop(t) { var down = oDiv2.offsetHeight - oDiv3.offsetHeight; if (t < 0) { t = 0; } else if (t > down) { t = down } oDiv3.style.top = t + 'px'; var scale = t / down; oDiv1.style.top = -(oDiv1.offsetHeight - oContainer.offsetHeight) * scale + 'px'; } addEvent(oDiv1, 'mousewheel', mousewheel); addEvent(oDiv1, 'DOMMouseScroll', mousewheel); addEvent(oDiv2, 'mousewheel', mousewheel); addEvent(oDiv2, 'DOMMouseScroll', mousewheel); function addEvent(obj, oEvent, fn) { if (obj.attachEvent) { obj.attachEvent('on' + oEvent, fn); } else { obj.addEventListener(oEvent, fn, false); } } function mousewheel(e) { var ev = e || event, bDown = false; bDown = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0; if (bDown) { setTop(oDiv3.offsetTop+10); }else{ setTop(oDiv3.offsetTop-10); } //FF,绑定事件，阻止默认事件 if (e.preventDefault) { e.preventDefault(); } return false; } </script> </body> </html>