javascript滚动条之ScrollBar.js

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

/*=================================
 * ScrollBar.js beta
 * Author:wuquanyao
 * Email:wqynqa@163.com
 *=================================*/
var ScrollBar = {};
(function(ScrollBar){
    var parent,root,track,bar,tx,ch,h,sh,rate;
    ScrollBar.adapter = function(config)
    {
        init(config);
    }
    function init(config)
    {
        parent = document.querySelector(config['selector']);
        root   = parent.parentNode;
        createBar();
        mouseaction();
    }
    function createBar()
    {
        track = document.createElement('div');
        track.setAttribute('class','scroll-track');
        bar   = document.createElement('div');
        bar.setAttribute('class','scroll-bar');
        track.appendChild(bar);
        root.appendChild(track);
        sh = root.scrollHeight;
        ch = root.offsetHeight;
        tx = root.offsetTop;
        h  = ch/sh*ch;
        if(h<30){
            bar.style.height = '30px';
            h = 30;
        }else{
            bar.style.height = h+'px';
        }
        rate = (sh-ch)/(ch-h);
    }
    function mouseaction()
    {
        function eventparse(obj,type,func){
            if(document.attachEvent){
                var events = {
                    click:'onclick',
                    mouseover:'onmouseover',
                    mousemove:'onmousemove',
                    mouseout:'onmouseout',
                    mousedown:'onmousedown',
                    mouseup:'onmouseup',
                    wheel:'DOMMouseScroll'
                };
                obj.attachEvent(events[type],func);
            }else{
                var events = {
                    click:'click',
                    mouseover:'mouseover',
                    mousemove:'mousemove',
                    mouseout:'mouseout',
                    mousedown:'mousedown',
                    mouseup:'mouseup',
                    wheel:'DOMMouseScroll'
                };
                obj.addEventListener(events[type],func,false);
            }
        }
        
        function init(){
            var bool = false,v;
            eventparse(bar,'mousedown',function(event){
                bool  = true;
            });            
            eventparse(document,'mousemove',function(event){
                if(bool){
                    if(event.clientY<=(tx+10)){
                        v = 0;
                    }else if(event.clientY>=(tx+ch-h)){
                        v = tx+ch-h;
                    }else{
                        v = event.clientY;
                    }
                    parent.style.transform = 'translate(0px,'+(-v*rate)+'px)'; 
                    bar.style.transform = 'translateY('+v+'px)';
                }
            });
            eventparse(document,'mouseup',function(event){ 
                bool = false;
            });
            // eventparse(track,'click',function(event){
            //     event.stopPropagation();
            //     bar.style.transition = 'all 0ms ease 0ms';
            //     if(event.clientY<(tx+h)){
            //         bar.style.transform = 'translate(0px,0px)';
            //     }else if(event.clientY>=(tx+ch-h)){
            //         bar.style.transform = 'translate(0px,'+(tx+ch-h)+'px)';
            //     }else{
            //         bar.style.transform = 'translate(0px,'+(event.clientY-h/2)+'px)';
            //     }
            //     parent.style.transform = 'translate(0px,'+((-event.clientY+tx)*rate)+'px)'; 
            // });
            var offset=0;
            if (window.navigator.userAgent.indexOf("Firefox") >= 0) {
                eventparse(parent,'wheel',wheelEvent);    
            }else{
                parent.onmousewheel=parent.onmousewheel=wheelEvent;
            }

            function wheelEvent(e){
                var transform,bO,wv = (e.detail/3*20) || (-(e.wheelDelta/120*20));
                if((offset<(sh-ch) &&(offset>=0))){
                    transform = 'translate(0px,'+(-offset)+'px)'; 
                    bO = 'translateY('+(offset/rate)+'px)';
                    offset = ((offset+wv)>(sh-ch))?offset:( ((offset+wv)<=0)?0:(offset+wv) );
                }
                bar.style.transform = bO;
                parent.style.transform = transform; 
            }
        }
        init();
    }
})(ScrollBar);