js制作列表滾動（有滾動條）

function mouseWheel(obj, fn){
			var ff = navigator.userAgent.indexOf("Firefox");
			if (ff != -1) {
				obj.addEventListener("DOMMouseScroll", wheel, false);
			}else{
				obj.onmousewheel = wheel;
			}
			
			function wheel(event){
				var event = event || window.event;	
				var down = true; //判斷是否向下滾動
		
				if (event.preventDefault){ //清除默認事件
					event.preventDefault();
				}
		
				if (event.detail){ //FF
					down = event.detail < 0;
				}else{
					down = event.wheelDelta > 0;
				}
				
				fn.apply(obj,[event, down]);
				
				return false;
			}
		
		}
		
		function scrollFn() {
			var wrap = document.querySelector(".panelFather");
			var middle = document.querySelector(".panelSons");
			var sliderWrap = document.querySelector("#sliderWrap");
			var slider = document.querySelector("#slider");
			var y = 0;
			
			//設置滾動按鈕高度
			function scrollHeight() {
				var scale =wrap.clientHeight/880;
				var height = sliderWrap.offsetHeight * scale; 				
				if (height < 50){ 
					height = 50;
				}
				slider.style.height = height + "px";
			}
			scrollHeight();

			var contMaxHeight = 880 - wrap.clientHeight; 
			var sliderMaxHeight = sliderWrap.offsetHeight - slider.clientHeight;

			//滾動函數
			function move() {
				if (y <= 0) { //限制滾動范圍
					y = 0;
				}else if (y >= sliderMaxHeight) {
					y = sliderMaxHeight;
				}

				var moveScale = y / sliderMaxHeight; 

				slider.style.top = y + "px";
				middle.style.top = - contMaxHeight * moveScale + "px";
			}
			
			//滾動按鈕拖拽
			slider.onmousedown = function (event){

				var event = event || window.event;
				var disY = event.clientY - slider.offsetTop;

				document.onmousemove = function (event){

					var event = event || window.event;
					y = event.clientY - disY;
					move();
					
				}
				document.onmouseup = function (){
					document.onmousemove = null;
				}
				return false;
			}

			//自定義滾動距離
			mouseWheel(wrap, function (event, down){
				if (down){
					y -= 40;
				}else{
					y += 40;
				}
				
				move();
			});

			//鍵盤上下鍵控制上下滾動
			document.onkeydown = function (event){
			
				var event = event || window.event;
				switch (event.keyCode){
					case 38:
						y -= 5;
						break;
					case 40:
						y += 5;
						break;
				}
				move();
			}

			//點擊滾動條，跳到相應位置
			sliderWrap.onmousedown = function (event){
			
				var event = event || window.event;
		
				//計算移動的距離
				/*
					鼠標垂直坐標 - 最外層元素上間距 = 鼠標移動的距離 y值是鼠標移動的距離再減去滾動按鈕高度的一半，目的使滾動按鈕高度的中心位置對准鼠標坐標
				*/
				y = event.clientY - wrap.offsetTop - slider.offsetHeight / 2;
				
				move();
			}

		}
		scrollFn();

　　直接鋪上代碼，簡單易懂