isScroll代码

window.iScroll = (function(w,d){
    var isMobile = /mobile/gi.test(navigator.userAgent.toLowerCase());
    var events = isMobile ? {
        down: ‘touchstart‘,
        move: ‘touchmove‘,
        up: ‘touchend‘
    } : {
        down: ‘mousedown‘,
        move: ‘mousemove‘,
        up: ‘mouseup‘
    },x,y,x2,y2 = 0;
    function Scroll(o){
        this.d = (typeof o==‘object‘) ? o : d.querySelector(o);
        this.child = this.d.children[0];
        if(this.child.offsetHeight > this.d.offsetHeight ) this.init();
    };
    Scroll.prototype={
        init : function(){
            this.d.insertAdjacentHTML("beforeend", ‘<div class="scroll-bar"><span></span></div>‘);
            this.bind();
        },
        top : function(fn){
            this.topFn  = fn;
        },
        bottom : function(fn){
            this.bottomFn = fn;
        },
        resize : function(){
            //璁剧疆婊氬姩鏉′綅缃紝楂樺害
            this.childHeight = this.child.offsetHeight
            this.scrollHeight = this.childHeight - this.d.offsetHeight;
            this.bar = this.d.querySelector(‘.scroll-bar‘)
            this.barHeight = this.d.offsetHeight * this.d.offsetHeight / this.child.offsetHeight;
            this.bar.style.height = this.barHeight+‘px‘;
            this.bar.style[‘transform‘] =  this.bar.style[‘-webkit-transform‘] = ‘translate3d(0,‘+( +this.get3d(this.child)[1]/(this.d.offsetHeight - this.child.offsetHeight)*(this.d.offsetHeight - this.bar.offsetHeight) )+‘px,0)‘;
        },
        bind : function(){
            var that = this,off,late,timer,speed,endPage,moveLate = false,endFlag = false,translate = 0;
            this.d.addEventListener(events.down,down)
            this.resize();
            function down(e){
                off = true;
                clearInterval(timer);
                var ev = isMobile ? e.changedTouches[0] : e ;
                x = ev.pageX;
                y = endPage = ev.pageY;
                that.child.style[‘transition‘] = that.child.style[‘-webkit-transition‘] = ‘none‘;
                translate = +that.get3d(that.child)[1];
                speed = 0;
                d.addEventListener(events.move,move);
                d.addEventListener(events.up,up);
            };
            function move(e){
                var ev = isMobile ? e.changedTouches[0] : e ;
                e.preventDefault();
                x2 = ev.pageX;y2 = ev.pageY;
                late = +that.get3d(that.child)[1];
                speed = ev.pageY - endPage;
                endPage = ev.pageY;
                moveLate = Math.abs( y2 - y) > 10 ? true : false;
                var barLate = ( late/(that.d.offsetHeight - that.child.offsetHeight)*(that.d.offsetHeight - that.bar.offsetHeight) );
                if(late >= 0){
                    that.child.style[‘transform‘] = that.child.style[‘-webkit-transform‘] = ‘translate3d(0,‘+parseInt((y2-y+translate)/3)+‘px,0)‘;
                    that.bar.style[‘transform‘] =  that.bar.style[‘-webkit-transform‘] = ‘translate3d(0,0px,0)‘;
                    endFlag = true
                    return false;
                }else if(-late>=that.scrollHeight){
                    if(off){ 
                        y = ev.pageY;
                        off = false;
                    };
                    that.child.style[‘transform‘] = that.child.style[‘-webkit-transform‘] = ‘translate3d(0,‘+parseInt((y2-y)/3 - that.scrollHeight)+‘px,0)‘;
                    endFlag = true
                    return false;
                }else{
                    endFlag = false;
                    that.child.style[‘transform‘]  = that.child.style[‘-webkit-transform‘] = ‘translate3d(0,‘+parseInt(y2-y+translate)+‘px,0)‘;
                    that.bar.style[‘transform‘] = that.bar.style[‘-webkit-transform‘] = ‘translate3d(0,‘+(barLate)+‘px,0)‘;
                }
 
            };
            function up(e){
                var scales = +that.get3d(that.child)[1]
                d.removeEventListener(events.move,move);
                d.removeEventListener(events.up,up);
                if(moveLate && endFlag){
                    moveLate = false
                    that.d.addEventListener(‘transitionend‘,fn,false);
                    that.d.addEventListener(‘webkitTransitionEnd‘,fn,false);
                };
                
                function fn(ev){
                    if(+that.get3d(that.child)[1]==0){
                        that.topFn && that.topFn.call(that.d,scales,0);
                    }else{
                        that.bottomFn && that.bottomFn.call(that.d,scales,+that.get3d(that.child)[1]);
                    };
                    that.d.removeEventListener(‘transitionend‘,fn);
                    that.d.removeEventListener(‘webkitTransitionEnd‘,fn);
                };
                timer = setInterval(function(){
                    late = that.get3d(that.child)[1]*1;
                    barLate = ( late/(that.d.offsetHeight - that.child.offsetHeight)*(that.d.offsetHeight -  that.bar.offsetHeight) )
                    speed *= 0.95;
                    if( Math.floor(Math.abs( speed)) <=0){
                        clearInterval(timer);
                        if(late > 0){
                            setTrans(true);
                        }else if(-late>= that.scrollHeight){
                            setTrans(false);
                        };
                    }else{
                        if(late > 0){
                            setTrans(true);
                         }else if(-late>= that.scrollHeight){
                            setTrans(false);
                        }else{
                            that.child.style[‘transform‘] = that.child.style[‘-webkit-transform‘] = ‘translate3d(0,‘+parseInt(late + speed)+‘px,0)‘;
                             that.bar.style[‘transform‘] =  that.bar.style[‘-webkit-transform‘] = ‘translate3d(0,‘+(barLate )+‘px,0)‘;
                        };
                    };
                },13);
                function setTrans(a){
                    clearInterval(timer);
                    that.child.style[‘transition‘] =‘transform .5s cubic-bezier(0.1, 0.57, 0.1, 1)‘;
                    that.child.style[‘-webkit-transition‘] = ‘-webkit-transform .5s cubic-bezier(0.1, 0.57, 0.1, 1)‘;
                    if(a){
                        that.child.style[‘transform‘] = that.child.style[‘-webkit-transform‘] = ‘translate3d(0,0px,0)‘;
                        that.bar.style[‘transform‘] = that.bar.style[‘-webkit-transform‘] = ‘translate3d(0,0px,0)‘;
                    }else{
                        that.child.style[‘transform‘] = that.child.style[‘-webkit-transform‘] = ‘translate3d(0,‘+- that.scrollHeight+‘px,0)‘;
                        that.bar.style[‘transform‘] = that.bar.style[‘-webkit-transform‘] = ‘translate3d(0,‘+( that.d.offsetHeight -  that.bar.offsetHeight )+‘px,0)‘;
                    };
                };
                e.stopImmediatePropagation();
            };
        },
        get3d : function(obj){
            var str = this.getst(obj,‘transform‘) || this.getst(obj,‘WebkitTransform‘);
            var results = str.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/);
            if(!results) return [0, 0, 0];
            if(results[1] == ‘3d‘) return results.slice(2,5);
            results.push(0);
            return results.slice(5, 8);
        },
        getst : function (obj,attr){
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
        }
    };
    return Scroll;
})(window,document);