js原生封装自定义滚动条

 /*
  * @Author: dothin前端
  * @Date:   2015-11-21 00:12:15
  * @Last Modified by:   dothin前端
  * @Last Modified time: 2015-11-21 00:29:12
  */
 ! function() {
     var EventUtil = {
         addHandler: function(obj, type, handler) {
             if (obj.addEventListener) {
                 obj.addEventListener(type, handler, false);
             } else if (obj.attachEvent) {
                 obj.attachEvent("on" + type, handler);
             } else {
                 obj["on" + type] = handler;
             }
         },
         removeHandler: function(obj, type, handler) {
             if (obj.removeEventListener) {
                 obj.removeEventListener(type, handler, false);
             } else if (obj.detachEvent) {
                 obj.detachEvent("on" + type, handler);
             } else {
                 obj["on" + type] = null;
             }
         },
         getEvent: function(event) {
             return event ? event : window.event;
         },
         getTarget: function(event) {
             return event.target || event.srcElement;
         },
         preventDefault: function(event) {
             if (event.preventDefault) {
                 event.preventDefault();
             } else {
                 event.returnValue = false;
             }
         },
         stopPropagation: function(event) {
             if (event.stopPropagation) {
                 event.stopPropagation();
             } else {
                 event.cancelBubble = true;
             }
         },
         getWheelDelta: function(event) {
             if (event.wheelDelta) {
                 return event.wheelDelta;
             } else {
                 return -event.detail * 40;
             }
         }
     };
     //tip:滚动条上面的长度可变的按钮
     //scrollBar：滚动条
     //section：内容父级
     //article：内容
     function ScrollBar(tip, scrollBar, section, article) {
         this.oTip = document.getElementById(tip);
         this.oScrollBar = document.getElementById(scrollBar);
         this.oSection = document.getElementById(section);
         this.oArticle = document.getElementById(article);
         var _this = this;
         this.init();
         this.oTip.onmousedown = function(ev) {
             _this.Down(ev);
             return false;
         };
         //给需要加滚动事件的元素加滚动事件
         EventUtil.addHandler(this.oSection, 'mousewheel', function(ev) {
             _this.onMouseWheel(ev);
         }); //ie,chrome
         EventUtil.addHandler(this.oSection, 'DOMMouseScroll', function(ev) {
             _this.onMouseWheel(ev);
         }); //ff
         EventUtil.addHandler(this.oScrollBar, 'mousewheel', function(ev) {
             _this.onMouseWheel(ev);
         }); //ie,chrome
         EventUtil.addHandler(this.oScrollBar, 'DOMMouseScroll', function(ev) {
             _this.onMouseWheel(ev);
         }); //ff
     };
     //初始化滚动条，内容不够时隐藏滚动条，滚动条按钮长度由内容长度决定
     ScrollBar.prototype.init = function() {
         if (this.oSection.offsetHeight >= this.oArticle.offsetHeight) {
             this.oScrollBar.style.display = 'none';
         } else {
             this.oTip.style.height = 100 * this.oScrollBar.offsetHeight / (this.oArticle.offsetHeight - this.oSection.offsetHeight) + 'px';
             //document.title = this.oTip.style.height;
         }
         //各浏览器行高，字体大小，字体类型，不一致，要想初始化滚动条一致，先统一样式
     };
     ScrollBar.prototype.Down = function(ev) {
         var oEvent = EventUtil.getEvent(ev);
         var _this = this;
         this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight;
         this.disY = oEvent.clientY - this.oTip.offsetTop;
         document.onmousemove = function(ev) {
             _this.fnMove(ev);
             return false;
         }
         document.onmouseup = function(ev) {
             _this.Up(ev);
         }
     };
     ScrollBar.prototype.fnMove = function(ev) {
         var oEvent = EventUtil.getEvent(ev);
         var t = oEvent.clientY - this.disY;
         this.Move(t);
     };
     ScrollBar.prototype.onMouseWheel = function(ev) {
         var oEvent = EventUtil.getEvent(ev);
         this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight;
         this.disY = oEvent.clientY - this.oTip.offsetTop;
         if (EventUtil.getWheelDelta(oEvent) > 0) {
             var t = this.oTip.offsetTop - 10;
             this.Move(t);
         } else {
             var t = this.oTip.offsetTop + 10;
             this.Move(t);
         }
         EventUtil.preventDefault(oEvent);
     };
     ScrollBar.prototype.Move = function(t) {
         if (t < 0) {
             t = 0;
         } else if (t > this.maxH) {
             t = this.maxH;
         }
         this.oTip.style.top = t + 'px';
         this.contentH = this.oArticle.offsetHeight - this.oSection.offsetHeight;
         this.oArticle.style.top = -this.contentH * this.oTip.offsetTop / this.maxH + 'px';
     };
     ScrollBar.prototype.Up = function(ev) {
         document.onmousemove = document.onmouseup = null;
     };
     window.ScrollBar = ScrollBar;
 }();

调用实例：

 <!DOCTYPE html>
 <html lang="en" id="html">
 <head>
     <meta charset="UTF-8" />
     <title>title here</title>
     <script src="scrollBar.js"></script>
     <style>
         #section{position:absolute;top:200px; left:50px;width:300px; height:298px; border:1px solid #999; overflow: hidden; }
         #article{position:absolute;padding:20px; text-indent: 30px;font-size: 14px; line-height: 25px; font-family: '微软雅黑';}
         #scrollBar{ position:absolute;top:0; right:0;height:300px; width:20px; background:#ddd;}
         #tip{position:absolute;top:0;left:0; background:#999; width:20px; min-height:20px; cursor:pointer;}
     </style>
 </head>
 <body id="body" style="height:2000px;">
     <div id="section">
         <div id="article">
             一滴血而已，居然带动天地大势，滚滚而涌，让大漠沸腾，沙浪拍天，所有人都在颤栗！

     异域百世
    一滴血，居然造成这种要灭世般的景象，怎能令人不畏？

    “不朽之王！”

    这一刻，异域百万大军顶礼膜拜后，全都高呼，他们激动，神色疯狂，带着敬仰。还有无比的崇敬，仰望血海。

    五色血液浩荡，真的如汪洋席卷而来，淹没这里。
    的杀气，滔天而上，滚滚沸腾。

     大旗横空，如银河翻卷。猎猎作响，绽放出刺目的光，上面有血迹，虽然过去了一个纪元，还未彻底干涸。

     因为，那是属于仙王的血，此时像是要滴落了下来，从旗面内不断渗出！
     万大军全都跪伏了下去，进行膜拜！

     刹那，域外诸多星斗都在摇动，整片大宇宙都要震荡起来，那种威势不可想象，撼天动地，岁月长河跟着浮现。

     一滴血而已，就造成了这般无法理解的恐怖景象！

     所有人都知道，那是异域的无上强者演绎的，真身过不来，洒出一滴血，跨过天渊，飞临这片战场中。

  一滴血，晶莹欲滴，绽放五色不朽之光，滚滚而来，看着很小一滴，但是气势磅礴，压的乾坤轰鸣，要崩溃了。

    帝关，城墙上。

    许多人胆寒，哪怕有巨城可守，难以攻破，众人也惶恐，神魂都在不由自主的颤栗。

    “我就知道，孟天正惹大祸了，我都已经谈好条件，他还出城，今日若有大难，他将是千古罪人！”金太君说道。

    至于各族修士，包括金系人马、杜家等都早已说不出话来，那种恐怖波动，让他们一个脸色苍白。

    许多人都觉得，不朽之王是不可战胜的，万一他们真的动身过来，城破了怎么办？

    “应该……不会跨界吧？”一些人颤声道，这是杜家的大统领。

    “跨界与否，一直是五五之数，就看他们的心意了！”金太君手拄着木杖说道。

    帝关前，出城作战的帝关修士自然也都面色发白了，虽然说他们很勇猛，无所畏惧，但是那种压迫让他们身体难受。

    轰！

    几件仙器发光，隔绝外界，绽放出一缕又一缕白雾，那是仙气在弥漫，守护了他们。

    然而，那滴血也发生了奇异的变化。迅速放大，如同汪洋一般，席卷了天上地下，迅速而来。铺天盖地。

    仿佛世界末日来临，震撼人间，所有人都惶恐，难以抗拒。

    域外，一颗又一颗星体都在跟着颤栗。在抖动，间要解体，要在这一刻崩开。

    “铁血战旗，不复苏更待何时！”孟天正站在那里，一招手，将那面破烂的战旗取到手中，一声大吼，而后猛力将它掷出。

     破烂的战旗，饱经岁月洗礼。带着万古的沉重与沧桑，哗的一声卷动，朝前方飞去，而后不断放大。

     到了最后。它抖动起来，原本暗淡的旗面，发出盖
         </div>
         <div id="scrollBar">
             <div id="tip"></div>
         </div>
     </div>
     <script>
         new ScrollBar('tip','scrollBar','section','article');
     </script>
 </body>
 </html>