原生js模擬滾動條

       滾動條的基本交互有兩個，鼠標拖拽滾動條和滾輪滾動。

       滾動條涉及到的dom元素：一、主體區域（obj，box2與box4的父元素），鼠標滾動的觸發主體，包含內容和滾動條，寬高自定。二、滾動條（box1），寬自定，高按內容區比例計算。三、滾動區域（box2，box1的父節點），高與內容可視區的高相同，寬自定。四、內容（box3，滾動的內容主體）。五、內容（box4，box3的父元素，有限寬高，內容可視區）。

       實現的基本原理就是以上元素絕對定位，經過鼠標的交互事件，來完成相關dom的top值，已達到模擬滾動條的目的。

function scrollbar(obj,box1,box2,box3,box4){ 
	var oBox=document.getElementById(obj);
	var oBar=document.getElementById(box1);
	var oRight=document.getElementById(box2);
	var oCon=document.getElementById(box3);
	var oLeft=document.getElementById(box4);
	//算滾動快的高度
	oBar.style.height=oLeft.offsetHeight/oCon.offsetHeight*oRight.offsetHeight+'px';      
        //添加滾動快拖動的事件
	oBar.onmousedown=function(ev){
		var oEvent=ev || event;
		console.log(oEvent.clientY);
		var disY=oEvent.clientY-oBar.offsetTop;
		document.onmousemove=function(ev){
			var oEvent=ev || event;
			var t=oEvent.clientY-disY;
			setTop(t);
		}
		document.onmouseup=function(){
			document.onmousemove=null;
			document.onmouseup=null;	
			oBar.releaseCapture && oBar.releaseCapture();
		}
		oBar.setCapture && oBar.setCapture();
		return false;	
	}	
	function setTop(t){
		t<0 && (t=0);
		t>oRight.offsetHeight-oBar.offsetHeight&&(t=oRight.offsetHeight-oBar.offsetHeight);
		oBar.style.top=t+'px';	
		var scale=t/(oRight.offsetHeight-oBar.offsetHeight);	
		oCon.style.top=-(oCon.offsetHeight-oLeft.offsetHeight)*scale+'px';	
	}
}

函數setTop爲主要交互函數，主要是根據傳入的參數改變內容和滾動塊的top值，完成模擬滾動。

以上函數完成了滾動的拖動交互，下面的函數完成滾輪滾動

function addWheel(obj,fn){
	function fnWheel(ev){
		var oEvent=ev || event;
		var bDown=false;
		if(oEvent.wheelDelta){
			if(oEvent.wheelDelta<0){
				bDown=true;
			}else{
				bDown=false;		
			}	
		}else{
			if(oEvent.detail>0){  //ff瀏覽器
				bDown=true;
			}else{
				bDown=false;
			}	
		}
		fn && fn(bDown);
		oEvent.preventDefault && oEvent.preventDefault();
		return false;
	}
	//ff瀏覽器滾動事件特殊
	if(window.navigator.userAgent.toLowerCase().indexOf('firefox')!=-1){
		obj.addEventListener('DOMMouseScroll',fnWheel,false);
	}else{
		obj.onmousewheel=fnWheel;
	}
}

addWheel(oBox,function(bDown){
		var t=oBar.offsetTop;
		if(bDown){
			t+=10;
		}else{
			t-=10;
		}
		setTop(t);		
	});

把addWheel函數放入scrollbar中，滾動的速度能夠由回調函數的參數t控制。

經過調用scrollbar函數就能簡單完成模擬滾動條的功能（垂直）。