var scrollCtrl = function(list,bar,ch,bh){ var ctrl = { obj:null, barobj:null, listH:0, conH:ch, barH:bh, delta:{}, startP:{}, nowPos:0, tmpPos:0, oftH:0, stime:0, mvPos:0, handleEvent:function(e){ switch(e.type) { case 'touchstart': this.start(e); break; case 'touchmove': this.move(e); break; case 'touchend': this.end(e); break; } }, start:function(e){ var touches = e.touches[0]; this.startP = { y: touches.pageY, x: touches.pageX, time: +new Date }; this.delta = {}; this.tmpPos = this.nowPos; this.stime = +new Date; this.mvPos = 0; }, move:function(e){ if(this.conH>this.listH) { return; } e.preventDefault(); if (e.touches.length > 1 || e.scale && e.scale !== 1) { return; } var touches = e.touches[0]; if(!this.startP) { this.startP = { y: touches.pageY, x: touches.pageX, time: +new Date }; } this.delta = { y: touches.pageY - this.startP.y, x: touches.pageX - this.startP.x } var ofy = this.delta.y; if(this.conH>this.listH) { return; } var tpos=this.tmpPos + ofy; this.mvPos = ofy; this.nowPos = tpos; this.translate(this.obj.get(0),this.nowPos,0); var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH); this.translate(this.barobj.get(0),py,0); }, end:function(){ if(Math.abs(this.mvPos)>0) { if(this.nowPos>0) { this.nowPos = 0; this.translate(this.obj.get(0),this.nowPos,500); var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH); this.translate(this.barobj.get(0),py,500); } else if(-this.nowPos>this.listH-this.conH) { this.nowPos = -(this.listH-this.conH); this.translate(this.obj.get(0),this.nowPos, 500); var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH); this.translate(this.barobj.get(0),py,500); } else { var etime = +new Date; var dt = etime-this.stime; if(Math.abs(this.mvPos)>20) { var spd = this.mvPos*300/dt; var tp = this.nowPos+spd; if(tp>0) { tp=0; } else if(-tp>this.listH-this.conH) { tp = -this.listH+this.conH; } this.nowPos = tp; this.mvPos = 0; this.translate(this.obj.get(0),tp, 600); var py = -(this.barH-this.oftH)*this.nowPos/(this.listH-this.conH); this.translate(this.barobj.get(0),py,600); } } } }, translate:function(obj, disty,speed) { var style = obj && obj.style; if (!style) return; style.webkitTransitionTimingFunction = style.transitionTimingFunction = 'ease-out'; style.webkitTransitionDuration = style.transitionDuration = speed + 'ms'; style.webkitTransform = 'translate(0px, ' + disty + 'px)' + 'translateZ(0)'; style.msTransform = style.MozTransform = style.OTransform = 'translate(0px, ' + disty + 'px)'; }, fix:function(){ this.translate(this.obj.get(0),this.nowPos,0); }, reset:function(){ this.listH = this.obj.height(); this.translate(this.obj.get(0),0); if(this.conH>this.listH) { this.barobj.hide(); } else { var heightVar=this.barH/this.listH; var ph =Math.floor(this.barH*Math.pow(heightVar,0.3)); this.oftH = ph; this.barobj.height(ph); } }, init:function(){ this.obj = $(list); if(this.obj.get(0)) { this.obj.get(0).addEventListener('touchstart', this, false); this.obj.get(0).addEventListener('touchmove', this, false); this.obj.get(0).addEventListener('touchend', this, false); } this.barobj = $(bar); } } ctrl.init(); return ctrl; }
var rankListCtrl = new scrollCtrl(‘#rankList’,’#rankBar’,380,380);