滚动条组件

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);