javascript滚动条之ScrollBar.js

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

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.         }
133.         
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);