自定義滾動條

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
		<title>效果：鼠標在圖片上滾動，圖片放大或縮小</title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			-moz-user-select: none;
		}
			#scroll {
				width: 10px;
				height: 35px;
				background-color: #fff;
				position: absolute;
				right: 5px;
			}
			#main	{
				width: 502px;
				height: 350px;
				/*background: url(images/signup_icon.png);*/
				background-color: #555;
				margin: 0 auto;
				position: relative;
				top:50px;
				overflow: hidden;
			}
			#main ul li {
				width: 100%;
				height: 50px;
				text-align: center;
				font-size: 30px;
				color: #fff;
			}
			#ulList {
				position: absolute;
			}
		</style>
	</head>
	<body onselectstart="return false"> <!--禁止選中-->
		<div id="main">
			<!-- <img id="aaa" src="images/scroll.jpg" /> -->
			<div id="scroll"></div>
			<ul id="ulList">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>				
			</ul>
		</div>
		<script language="JavaScript" type="text/javascript">
			function dragDrop() {
				var VVG = {};
				VVG.DOM = {
					$:function(id) {
						return typeof id == 'string' ? document.getElementById(id) : id;
					},
					bindEvent:function(node,type,func) { //綁定事件方法
						if(node.addEventListener) {
							node.addEventListener(type,func,false); 
							// node:文檔節點、document、window 或 XMLHttpRequest;  type:字符串，事件名稱，不含「on」; false:表示該元素在事件的「冒泡階段」（由內向外傳遞時）響應時間,true:表示該元素在事件的「捕獲階段」（由外往內傳遞時）響應事件；
						} else if (node.attachEvent) {
							node.attachEvent('on' + type,func);
						} else {
							node['on' + type] = func;
						}
					},
					getEvent:function(event) {	//獲取事件
						return event ? event:window.event;
					},
					getTarget:function(event) { //獲取事件
						return event.target || event.srcElement;
					}
				};
				var Drop = function() {
					var dragging = null; //初始化 拖動所設標誌位
					var sTop = 0;
					var mouseClientY = 0; //初始鼠標位置 高度值
					function drag(event) {	//	事件執行函數
						event = VVG.DOM.getEvent(event);
						var target = VVG.DOM.getTarget(event);
						var main = VVG.DOM.$('main');
						var scroll = VVG.DOM.$('scroll');
						sTop = parseInt(sTop);
						var top = event.clientY + sTop - mouseClientY; // 鼠標如今位置 + 滾動條TOP值 - 鼠標按下時位置
						var liHeight = main.getElementsByTagName('li')[0].offsetHeight;
						var liNum = main.getElementsByTagName('li').length - (main.offsetHeight / liHeight);
						var ulList = VVG.DOM.$('ulList');	
						var scrollTop = scroll.offsetTop;	
						var liPx = 	liNum * liHeight / (main.offsetHeight - scroll.offsetHeight);	// li平均值		
						if(event.type == 'mousedown') {
							if(target.id == 'scroll') { // 獲取滾動條，只點擊它才執行
								if(event.button == 2) {	// 只有點擊鼠標左鍵執行
									return event.returnValue = false; // 解除默認事件發生
								} else {
									dragging = target;
									mouseClientY = event.clientY; //獲取鼠標的top值
									sTop = dragging.style.top != '' ? dragging.style.top : 0; // 獲取滾動條的TOP值	
								}
							}
								
						} else if (event.type == 'mousemove'){
							if(dragging) {

								if (scrollTop < 0) {
									dragging.style.top = '0px';
									ulList.style.top = '0px';
								} else if(scrollTop > (main.offsetHeight - scroll.offsetHeight)) {
									dragging.style.top = (main.offsetHeight - scroll.offsetHeight) + 'px';
									ulList.style.top = -liNum * liHeight + 'px';
								} else {
									dragging.style.top = top + 'px'; 
									ulList.style.top = -liPx * top + 'px'; 
								}
								
							}							
						} else if (event.type == 'mouseup') {
							dragging = null;
						} else if (event.type == 'mousewheel' || event.type == 'DOMMouseScroll') {
							var detail = event.detail *4 || parseInt(-event.wheelDelta/10);
							if (scrollTop < 0) {
								scroll.style.top = '0px';
								ulList.style.top = '0px';
							} else if(scrollTop > (main.offsetHeight - scroll.offsetHeight)) {
								scroll.style.top = (main.offsetHeight - scroll.offsetHeight) + 'px';
								ulList.style.top = -liNum * liHeight + 'px';
							} else {
								scroll.style.top = scrollTop + detail + 'px'; // 滾動條TOP值  + 滾輪值 = 滾動條如今位置
								ulList.style.top = -(scrollTop + detail) * liPx + 'px'; // （滾動條TOP值 + 滾輪值）* li平均值 = 滾動一次 UL向上移動的TOP值
							}							
						}				
					};	
					return {
						dragStart: function() {
							//綁定事件
							VVG.DOM.bindEvent(main, func(), drag);
							VVG.DOM.bindEvent(document, "mousedown", drag);
							VVG.DOM.bindEvent(main, "mousemove", drag);
							VVG.DOM.bindEvent(document, "mouseup", drag);						
						}()
					}										
				}();
			}
dragDrop();


function func() {
	return (/firefox/i).test(navigator.userAgent) ? 'DOMMouseScroll':'mousewheel';
}
		</script>
	</body>
</html>