首页 > 代码库 > javascript滚动条之ScrollBar.js

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. /*=================================
    2.  * ScrollBar.js beta
    3.  * Author:wuquanyao
    4.  * Email:wqynqa@163.com
    5.  *=================================*/
    6. var ScrollBar = {};
    7. (function(ScrollBar){
    8.     var parent,root,track,bar,tx,ch,h,sh,rate;
    9.     ScrollBar.adapter = function(config)
    10.     {
    11.         init(config);
    12.     }
    13.     function init(config)
    14.     {
    15.         parent = document.querySelector(config[‘selector‘]);
    16.         root   = parent.parentNode;
    17.         createBar();
    18.         mouseaction();
    19.     }
    20.     function createBar()
    21.     {
    22.         track = document.createElement(‘div‘);
    23.         track.setAttribute(‘class‘,‘scroll-track‘);
    24.         bar   = document.createElement(‘div‘);
    25.         bar.setAttribute(‘class‘,‘scroll-bar‘);
    26.         track.appendChild(bar);
    27.         root.appendChild(track);
    28.         sh = root.scrollHeight;
    29.         ch = root.offsetHeight;
    30.         tx = root.offsetTop;
    31.         h  = ch/sh*ch;
    32.         if(h<30){
    33.             bar.style.height = ‘30px‘;
    34.             h = 30;
    35.         }else{
    36.             bar.style.height = h+‘px‘;
    37.         }
    38.         rate = (sh-ch)/(ch-h);
    39.     }
    40.     function mouseaction()
    41.     {
    42.         function eventparse(obj,type,func){
    43.             if(document.attachEvent){
    44.                 var events = {
    45.                     click:‘onclick‘,
    46.                     mouseover:‘onmouseover‘,
    47.                     mousemove:‘onmousemove‘,
    48.                     mouseout:‘onmouseout‘,
    49.                     mousedown:‘onmousedown‘,
    50.                     mouseup:‘onmouseup‘,
    51.                     wheel:‘DOMMouseScroll‘
    52.                 };
    53.                 obj.attachEvent(events[type],func);
    54.             }else{
    55.                 var events = {
    56.                     click:‘click‘,
    57.                     mouseover:‘mouseover‘,
    58.                     mousemove:‘mousemove‘,
    59.                     mouseout:‘mouseout‘,
    60.                     mousedown:‘mousedown‘,
    61.                     mouseup:‘mouseup‘,
    62.                     wheel:‘DOMMouseScroll‘
    63.                 };
    64.                 obj.addEventListener(events[type],func,false);
    65.             }
    66.         }
    67.         
    68.         function init(){
    69.             var bool = false,v;
    70.             eventparse(bar,‘mousedown‘,function(event){
    71.                 bool  = true;
    72.             });            
    73.             eventparse(document,‘mousemove‘,function(event){
    74.                 if(bool){
    75.                     if(event.clientY<=(tx+10)){
    76.                         v = 0;
    77.                     }else if(event.clientY>=(tx+ch-h)){
    78.                         v = tx+ch-h;
    79.                     }else{
    80.                         v = event.clientY;
    81.                     }
    82.                     parent.style.transform = ‘translate(0px,‘+(-v*rate)+‘px)‘; 
    83.                     bar.style.transform = ‘translateY(‘+v+‘px)‘;
    84.                 }
    85.             });
    86.             eventparse(document,‘mouseup‘,function(event){ 
    87.                 bool = false;
    88.             });
    89.             // eventparse(track,‘click‘,function(event){
    90.             //     event.stopPropagation();
    91.             //     bar.style.transition = ‘all 0ms ease 0ms‘;
    92.             //     if(event.clientY<(tx+h)){
    93.             //         bar.style.transform = ‘translate(0px,0px)‘;
    94.             //     }else if(event.clientY>=(tx+ch-h)){
    95.             //         bar.style.transform = ‘translate(0px,‘+(tx+ch-h)+‘px)‘;
    96.             //     }else{
    97.             //         bar.style.transform = ‘translate(0px,‘+(event.clientY-h/2)+‘px)‘;
    98.             //     }
    99.             //     parent.style.transform = ‘translate(0px,‘+((-event.clientY+tx)*rate)+‘px)‘; 
    100.             // });
    101.             var offset=0;
    102.             if (window.navigator.userAgent.indexOf("Firefox") >= 0) {
    103.                 eventparse(parent,‘wheel‘,wheelEvent);    
    104.             }else{
    105.                 parent.onmousewheel=parent.onmousewheel=wheelEvent;
    106.             }
    107.             function wheelEvent(e){
    108.                 var transform,bO,wv = (e.detail/3*20) || (-(e.wheelDelta/120*20));
    109.                 if((offset<(sh-ch) &&(offset>=0))){
    110.                     transform = ‘translate(0px,‘+(-offset)+‘px)‘; 
    111.                     bO = ‘translateY(‘+(offset/rate)+‘px)‘;
    112.                     offset = ((offset+wv)>(sh-ch))?offset:( ((offset+wv)<=0)?0:(offset+wv) );
    113.                 }
    114.                 bar.style.transform = bO;
    115.                 parent.style.transform = transform; 
    116.             }
    117.         }
    118.         init();
    119.     }
    120. })(ScrollBar);

javascript滚动条之ScrollBar.js