js原生封装自定义滚动条

  1 /* 
  2  * @Author: dothin前端
  3  * @Date:   2015-11-21 00:12:15
  4  * @Last Modified by:   dothin前端
  5  * @Last Modified time: 2015-11-21 00:29:12
  6  */
  7 ! function() {
  8     var EventUtil = {
  9         addHandler: function(obj, type, handler) {
 10             if (obj.addEventListener) {
 11                 obj.addEventListener(type, handler, false);
 12             } else if (obj.attachEvent) {
 13                 obj.attachEvent("on" + type, handler);
 14             } else {
 15                 obj["on" + type] = handler;
 16             }
 17         },
 18         removeHandler: function(obj, type, handler) {
 19             if (obj.removeEventListener) {
 20                 obj.removeEventListener(type, handler, false);
 21             } else if (obj.detachEvent) {
 22                 obj.detachEvent("on" + type, handler);
 23             } else {
 24                 obj["on" + type] = null;
 25             }
 26         },
 27         getEvent: function(event) {
 28             return event ? event : window.event;
 29         },
 30         getTarget: function(event) {
 31             return event.target || event.srcElement;
 32         },
 33         preventDefault: function(event) {
 34             if (event.preventDefault) {
 35                 event.preventDefault();
 36             } else {
 37                 event.returnValue = false;
 38             }
 39         },
 40         stopPropagation: function(event) {
 41             if (event.stopPropagation) {
 42                 event.stopPropagation();
 43             } else {
 44                 event.cancelBubble = true;
 45             }
 46         },
 47         getWheelDelta: function(event) {
 48             if (event.wheelDelta) {
 49                 return event.wheelDelta;
 50             } else {
 51                 return -event.detail * 40;
 52             }
 53         }
 54     };
 55     //tip:滚动条上面的长度可变的按钮
 56     //scrollBar：滚动条
 57     //section：内容父级
 58     //article：内容
 59     function ScrollBar(tip, scrollBar, section, article) {
 60         this.oTip = document.getElementById(tip);
 61         this.oScrollBar = document.getElementById(scrollBar);
 62         this.oSection = document.getElementById(section);
 63         this.oArticle = document.getElementById(article);
 64         var _this = this;
 65         this.init();
 66         this.oTip.onmousedown = function(ev) {
 67             _this.Down(ev);
 68             return false;
 69         };
 70         //给需要加滚动事件的元素加滚动事件
 71         EventUtil.addHandler(this.oSection, 'mousewheel', function(ev) {
 72             _this.onMouseWheel(ev);
 73         }); //ie,chrome
 74         EventUtil.addHandler(this.oSection, 'DOMMouseScroll', function(ev) {
 75             _this.onMouseWheel(ev);
 76         }); //ff
 77         EventUtil.addHandler(this.oScrollBar, 'mousewheel', function(ev) {
 78             _this.onMouseWheel(ev);
 79         }); //ie,chrome
 80         EventUtil.addHandler(this.oScrollBar, 'DOMMouseScroll', function(ev) {
 81             _this.onMouseWheel(ev);
 82         }); //ff
 83     };
 84     //初始化滚动条，内容不够时隐藏滚动条，滚动条按钮长度由内容长度决定
 85     ScrollBar.prototype.init = function() {
 86         if (this.oSection.offsetHeight >= this.oArticle.offsetHeight) {
 87             this.oScrollBar.style.display = 'none';
 88         } else {
 89             this.oTip.style.height = 100 * this.oScrollBar.offsetHeight / (this.oArticle.offsetHeight - this.oSection.offsetHeight) + 'px';
 90             //document.title = this.oTip.style.height;
 91         }
 92         //各浏览器行高，字体大小，字体类型，不一致，要想初始化滚动条一致，先统一样式
 93     };
 94     ScrollBar.prototype.Down = function(ev) {
 95         var oEvent = EventUtil.getEvent(ev);
 96         var _this = this;
 97         this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight;
 98         this.disY = oEvent.clientY - this.oTip.offsetTop;
 99         document.onmousemove = function(ev) {
100             _this.fnMove(ev);
101             return false;
102         }
103         document.onmouseup = function(ev) {
104             _this.Up(ev);
105         }
106     };
107     ScrollBar.prototype.fnMove = function(ev) {
108         var oEvent = EventUtil.getEvent(ev);
109         var t = oEvent.clientY - this.disY;
110         this.Move(t);
111     };
112     ScrollBar.prototype.onMouseWheel = function(ev) {
113         var oEvent = EventUtil.getEvent(ev);
114         this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight;
115         this.disY = oEvent.clientY - this.oTip.offsetTop;
116         if (EventUtil.getWheelDelta(oEvent) > 0) {
117             var t = this.oTip.offsetTop - 10;
118             this.Move(t);
119         } else {
120             var t = this.oTip.offsetTop + 10;
121             this.Move(t);
122         }
123         EventUtil.preventDefault(oEvent);
124     };
125     ScrollBar.prototype.Move = function(t) {
126         if (t < 0) {
127             t = 0;
128         } else if (t > this.maxH) {
129             t = this.maxH;
130         }
131         this.oTip.style.top = t + 'px';
132         this.contentH = this.oArticle.offsetHeight - this.oSection.offsetHeight;
133         this.oArticle.style.top = -this.contentH * this.oTip.offsetTop / this.maxH + 'px';
134     };
135     ScrollBar.prototype.Up = function(ev) {
136         document.onmousemove = document.onmouseup = null;
137     };
138     window.ScrollBar = ScrollBar;
139 }();

调用实例：

 1 <!DOCTYPE html>
 2 <html lang="en" id="html">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>title here</title>
 6     <script src="scrollBar.js"></script>
 7     <style>
 8         #section{position:absolute;top:200px; left:50px;width:300px; height:298px; border:1px solid #999; overflow: hidden; }
 9         #article{position:absolute;padding:20px; text-indent: 30px;font-size: 14px; line-height: 25px; font-family: '微软雅黑';}
10         #scrollBar{ position:absolute;top:0; right:0;height:300px; width:20px; background:#ddd;}
11         #tip{position:absolute;top:0;left:0; background:#999; width:20px; min-height:20px; cursor:pointer;}
12     </style>
13 </head>
14 <body id="body" style="height:2000px;">
15     <div id="section">
16         <div id="article">
17             一滴血而已，居然带动天地大势，滚滚而涌，让大漠沸腾，沙浪拍天，所有人都在颤栗！
18 
19     异域百世
20    一滴血，居然造成这种要灭世般的景象，怎能令人不畏？
21    
22    “不朽之王！”
23    
24    这一刻，异域百万大军顶礼膜拜后，全都高呼，他们激动，神色疯狂，带着敬仰。还有无比的崇敬，仰望血海。
25    
26    五色血液浩荡，真的如汪洋席卷而来，淹没这里。
27    的杀气，滔天而上，滚滚沸腾。
28 
29     大旗横空，如银河翻卷。猎猎作响，绽放出刺目的光，上面有血迹，虽然过去了一个纪元，还未彻底干涸。
30 
31     因为，那是属于仙王的血，此时像是要滴落了下来，从旗面内不断渗出！
32     万大军全都跪伏了下去，进行膜拜！
33 
34     刹那，域外诸多星斗都在摇动，整片大宇宙都要震荡起来，那种威势不可想象，撼天动地，岁月长河跟着浮现。
35 
36     一滴血而已，就造成了这般无法理解的恐怖景象！
37 
38     所有人都知道，那是异域的无上强者演绎的，真身过不来，洒出一滴血，跨过天渊，飞临这片战场中。
39 
40  一滴血，晶莹欲滴，绽放五色不朽之光，滚滚而来，看着很小一滴，但是气势磅礴，压的乾坤轰鸣，要崩溃了。
41    
42    帝关，城墙上。
43    
44    许多人胆寒，哪怕有巨城可守，难以攻破，众人也惶恐，神魂都在不由自主的颤栗。
45    
46    “我就知道，孟天正惹大祸了，我都已经谈好条件，他还出城，今日若有大难，他将是千古罪人！”金太君说道。
47    
48    至于各族修士，包括金系人马、杜家等都早已说不出话来，那种恐怖波动，让他们一个脸色苍白。
49    
50    许多人都觉得，不朽之王是不可战胜的，万一他们真的动身过来，城破了怎么办？
51    
52    “应该……不会跨界吧？”一些人颤声道，这是杜家的大统领。
53    
54    “跨界与否，一直是五五之数，就看他们的心意了！”金太君手拄着木杖说道。
55    
56    帝关前，出城作战的帝关修士自然也都面色发白了，虽然说他们很勇猛，无所畏惧，但是那种压迫让他们身体难受。
57    
58    轰！
59    
60    几件仙器发光，隔绝外界，绽放出一缕又一缕白雾，那是仙气在弥漫，守护了他们。
61    
62    然而，那滴血也发生了奇异的变化。迅速放大，如同汪洋一般，席卷了天上地下，迅速而来。铺天盖地。
63    
64    仿佛世界末日来临，震撼人间，所有人都惶恐，难以抗拒。
65    
66    域外，一颗又一颗星体都在跟着颤栗。在抖动，间要解体，要在这一刻崩开。
67    
68    
69    “铁血战旗，不复苏更待何时！”孟天正站在那里，一招手，将那面破烂的战旗取到手中，一声大吼，而后猛力将它掷出。
70 
71     破烂的战旗，饱经岁月洗礼。带着万古的沉重与沧桑，哗的一声卷动，朝前方飞去，而后不断放大。
72 
73     到了最后。它抖动起来，原本暗淡的旗面，发出盖
74         </div>
75         <div id="scrollBar">
76             <div id="tip"></div>
77         </div>
78     </div>
79     <script>
80         new ScrollBar('tip','scrollBar','section','article');
81     </script>
82 </body>
83 </html>