javascript 滚动条|滚动条组件|自定义滚动条

var Scroll = Hc.Class.create({
							 
	Extends:Hc.Observer,
	
	config:{
		scrollBg:"#a6e7f9",
		scrollWidth:4,
		scrollColor:"#0065b1",
		fx:null
	},
	
	constructor:function(config){
		Scroll.Super.constructor.call(this,config);
		if(this.renderTo){
			this.render(this.renderTo);
		}
	},
	
	render:function(renderTo){
		if(!this.rendered){
			this.onRender(this.container = Hc.get(renderTo));
			this.initEvents();
			if(this.cls){
				this.el.addClass(this.cls);
			}
			if(this.style){
				this.el.applyStyles(this.style);
			}
			if(this.html){
				this.update(this.html,true);
			}
			this.rendered = true;
			
			if(this.width || this.height){
				this.setSize(this.width,this.height,true);
			}
			this.autoShowScroll();
		}
	},
	
	onRender:function(ct){
		this.el = ct.createIn("<div style='position:relative;overflow:hidden;'></div>",true);
		this.content = this.el.createIn("<div style='position:absolute;left:0;top:0;'></div>",true);
		this.scrollCt = this.el.createIn("<div style='position:absolute;width:"+this.scrollWidth+"px;top:0;display:none;overflow:hidden;background:"+this.scrollBg+";'></div>",true);
		this.scroll = this.scrollCt.createIn("<div style='cursor:pointer;position:absolute;top:0;overflow:hidden;left:0;background:"+this.scrollColor+";width:"+this.scrollWidth+"px;'></div>",true);
	},
	
	initEvents:function(){
		this.scrollCt.on("mousedown",this.onMouseDown,this);
		this.el.on("mousewheel",this.onMouseWheel,this,{stopEvent:true});
		this.drag = new Hc.Drag(this.scroll,{
			constrain:this.scrollCt,
			lockX:true,
			listeners:{
				scope:this,
				mousemove:function(){
					this.content.setTop(-this.scroll.getTop() / this.scale);
				}
			}
		});
	},
	
	onMouseWheel:function(eo){
		var top = this.scroll.getTop(),
			height = this.scrollHeight * .5;
		if(eo.getWheelDelta() < 1){
			top = Math.min(top + height,this.height - this.scrollHeight);
		}else{
			top = Math.max(top - height,0);
		}
		this.scrollTo(top);
	},
	
	onMouseDown:function(eo,target,dom){
		if(target == dom){
			var top = this.scroll.getTop();
			if(eo.top > top){
				top = Math.min(top + this.scrollHeight,this.height - this.scrollHeight);
			}else{
				top = Math.max(top - this.scrollHeight,0);
			}
			this.scrollTo(top);
		}
	},
	
	scrollTo:function(top){
		this.stopFx();
		this.fx = this.scroll.setTop(top,{
			duration:120,
			easing:"linear",
			onStep:function(){
				this.content.setTop(-this.scroll.getTop() / this.scale);
			},
			scope:this
		});
	},
	
	stopFx:function(){
		if(this.fx){
			this.fx.stop();
		}
	},
	
	setSize:function(w,h,prevent){
		if(Hc.isArray(w)){
			h = w[1];
			w = w[0];
		}
		this.width = w;
		this.height = h;
		this.el.setSize(w,h);
		this.scrollCt.setHeight(h);
		prevent || this.autoShowScroll();
	},
	
	update:function(html,prevent){
		this.content.update(html);
		prevent || this.autoShowScroll();
	},
	
	autoShowScroll:function(){
		this.content.setWidth(this.width);
		if(this.content.getHeight() > this.el.getHeight()){
			var width = this.width - this.scrollWidth;
			this.content.setWidth(width);
			this.calculateScroll();
			this.scrollCt.show().setLeft(width);
		}else{
			this.scrollCt.hide();
		}
	},
	
	calculateScroll:function(){
		var ch = this.content.getHeight(),
			height = this.height;
		this.scroll.setHeight(this.scrollHeight = Math.round(height * (this.scale = height / ch)));
	}
});