自定义滚动条样式

<style type="text/css">  #wraper{position:relative;width:300px;height:200px;padding-bottom:10px;background-color:#F6F6F6;overflow:hidden;}  #slider{position:absolute;width:600px;top:0;left:0;margin:0;line-height:1.5;font-size:12px;color:#333;}  #pannel{position:absolute;right:0;bottom:0;width:12px;height:100%;background-color:#F1F1F1;}  #drag{position:absolute;right:0;width:12px;height:80px;background-color:#BCBCBC;cursor:pointer;}  </style>  <div id="wraper">  <div id="slider">  <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>  <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>  <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>  </div>  <div id="pannel">  <div id="drag"></div>  </div>  </div>  <script type="text/javascript">  var o1 = document.getElementById('slider'),  o2 = document.getElementById('pannel'),  o3 = document.getElementById('drag');  function customBar(oSlider, oPanel, oTrigger){  this.parent = oSlider.parentNode;  this.slider = oSlider;  this.panel = oPanel;  this.trigger = oTrigger;  this.h1 = this.parent.clientHeight;  this.h2 = this.slider.offsetHeight;  this.h3 = this.panel.clientHeight;  this.h4 = this.trigger.offsetHeight;  this.k = (this.h2 - this.h1)/(this.h3 - this.h4);  this.dis = 0;  this.flag = false;     this.init();  }  customBar.prototype = {  init: function(){  if(this.k <= 0){  this.panel.style.display = 'none';  return;  }  this.slider.style.top = '0px';  this.trigger.style.top = '0px';  this.bind();  },  bind: function(){  var that = this;  this.trigger.onmousedown = function(e){  that.down.call(that, e);  }  this.trigger.onmousemove = document.onmousemove = function(e){  that.move.call(that, e);  }  this.trigger.onmouseup = document.onmouseup = function(e){  that.up.call(that, e);  }  },  down: function(e){  var e = window.event || e,  y1 = e.y || e.pageY,  y2 = parseInt(this.trigger.style.top);  this.dis = (y1 - y2);  this.flag = true;  this.move(e);  },  move: function(e){  if(!this.flag) return;window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();     //防止拖拽时文本被选中  var e = window.event || e,  y1 = e.y || e.pageY,  dis;  dis = Math.min(Math.max(y1 - this.dis, 0), (this.h3 - this.h4));  this.slider.style.top= -dis * this.k + 'px';  this.trigger.style.top = dis + 'px';  },  up: function(){  this.flag = false;  },  wheel: function(){  }  }  var ss = new customBar(o1, o2, o3);  </script>