javascript滚动条之ScrollBar.js

ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便
详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js

1. /*=================================
3. * ScrollBar.js beta
5. * Author:wuquanyao
7. * Email:wqynqa@163.com
9. *=================================*/
11. var ScrollBar = {};
13. (function(ScrollBar){
15. var parent,root,track,bar,tx,ch,h,sh,rate;
17. ScrollBar.adapter = function(config)
19. {
21. init(config);
23. }
25. function init(config)
27. {
29. parent = document.querySelector(config['selector']);
31. root   = parent.parentNode;
33. createBar();
35. mouseaction();
37. }
39. function createBar()
41. {
43. track = document.createElement('div');
45. track.setAttribute('class','scroll-track');
47. bar   = document.createElement('div');
49. bar.setAttribute('class','scroll-bar');
51. track.appendChild(bar);
53. root.appendChild(track);
55. sh = root.scrollHeight;
57. ch = root.offsetHeight;
59. tx = root.offsetTop;
61. h  = ch/sh*ch;
63. if(h<30){
65. bar.style.height = '30px';
67. h = 30;
69. }else{
71. bar.style.height = h+'px';
73. }
75. rate = (sh-ch)/(ch-h);
77. }
79. function mouseaction()
81. {
83. function eventparse(obj,type,func){
85. if(document.attachEvent){
87. var events = {
89. click:'onclick',
91. mouseover:'onmouseover',
93. mousemove:'onmousemove',
95. mouseout:'onmouseout',
97. mousedown:'onmousedown',
99. mouseup:'onmouseup',
101. wheel:'DOMMouseScroll'
103. };
105. obj.attachEvent(events[type],func);
107. }else{
109. var events = {
111. click:'click',
113. mouseover:'mouseover',
115. mousemove:'mousemove',
117. mouseout:'mouseout',
119. mousedown:'mousedown',
121. mouseup:'mouseup',
123. wheel:'DOMMouseScroll'
125. };
127. obj.addEventListener(events[type],func,false);
129. }
131. }
135. function init(){
137. var bool = false,v;
139. eventparse(bar,'mousedown',function(event){
141. bool  = true;
143. });
145. eventparse(document,'mousemove',function(event){
147. if(bool){
149. if(event.clientY<=(tx+10)){
151. v = 0;
153. }else if(event.clientY>=(tx+ch-h)){
155. v = tx+ch-h;
157. }else{
159. v = event.clientY;
161. }
163. parent.style.transform = 'translate(0px,'+(-v*rate)+'px)';
165. bar.style.transform = 'translateY('+v+'px)';
167. }
169. });
171. eventparse(document,'mouseup',function(event){
173. bool = false;
175. });
177. // eventparse(track,'click',function(event){
179. //     event.stopPropagation();
181. //     bar.style.transition = 'all 0ms ease 0ms';
183. //     if(event.clientY<(tx+h)){
185. //         bar.style.transform = 'translate(0px,0px)';
187. //     }else if(event.clientY>=(tx+ch-h)){
189. //         bar.style.transform = 'translate(0px,'+(tx+ch-h)+'px)';
191. //     }else{
193. //         bar.style.transform = 'translate(0px,'+(event.clientY-h/2)+'px)';
195. //     }
197. //     parent.style.transform = 'translate(0px,'+((-event.clientY+tx)*rate)+'px)';
199. // });
201. var offset=0;
203. if (window.navigator.userAgent.indexOf("Firefox") >= 0) {
205. eventparse(parent,'wheel',wheelEvent);
207. }else{
209. parent.onmousewheel=parent.onmousewheel=wheelEvent;
211. }
214. function wheelEvent(e){
216. var transform,bO,wv = (e.detail/3*20) || (-(e.wheelDelta/120*20));
218. if((offset<(sh-ch) &&(offset>=0))){
220. transform = 'translate(0px,'+(-offset)+'px)';
222. bO = 'translateY('+(offset/rate)+'px)';
224. offset = ((offset+wv)>(sh-ch))?offset:( ((offset+wv)<=0)?0:(offset+wv) );
226. }
228. bar.style.transform = bO;
230. parent.style.transform = transform;
232. }
234. }
236. init();
238. }
240. })(ScrollBar);