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            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                        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            //         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=0))){
                    transform = 'translate(0px,'+(-offset)+'px)'; 
                    bo = 'translatey('+(offset/rate)+'px)';
                    offset = ((offset+wv)>(sh-ch))?offset:( ((offset+wv)                }
                bar.style.transform = bo;
                parent.style.transform = transform; 
            }
        }
        init();
    }
})(scrollbar);
ad：真正免费，域名+虚机+企业邮箱=0元