JS原生之----滚动条 – 源码集中营

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动条</title>
		<style>
        * {margin: 0;padding: 0;}
        html,body {width: 100%;height: 100%;}
        #box { width: 100%; height: 100%; overflow: hidden; }
        .ball { width: 100%; height: 500px; }
        #scroll {
            width: 6px; height: 96%;
            position: fixed; top: 2%; right: 5px;
            border-radius: 3px; background-color: rgba(235, 233, 233, 0.5);
            z-index: 9998; opacity: 0;
        }
        #scrollBar {
            position: absolute; left: 0; top: 0;
            z-index: 9999;
            width: 6px; height: 20px;
            border-radius: 3px;
            background-color: #383838;
        }
    </style>
	</head>
	<body style="overflow:hidden;">
    <div id="box">
        <div id="content">
             <p class="ball" style="background-color:red;">赞</p>
            <p class="ball" style="background-color:blue;">玉</p>
            <p class="ball" style="background-color:yellow;">米</p>
            <p class="ball" style="background-color:green;">欣</p>
            <p class="ball" style="background-color:gray;">评</p>
            <p class="ball" style="background-color:orange;">轮</p>
            <p class="ball" style="background-color:pink;">吧</p>
        </div>
    </div>
    <div id="scroll">
        <div id="scrollBar"></div>
    </div>
	</body>
	<script type="text/javascript" src="js/draggable.js" ></script>
	<script>
		onload = function(){
			var scrollDiv = document.getElementById("scroll");
			var scrollBar = document.getElementById("scrollBar");
			var content = document.getElementById("content");
			var box = document.getElementById("box");
			
			/*滚轮事件 火狐：DOMMouseScroll(必须用2级事件写) 其余：onmousewheel(一级事件，用2级事件写也可以：mousewheel)
			 * 火狐中:e.detail>0时向下滚动，e.detail<0时向上滚动
			 * 其余浏览器包括IE: e.wheelDelta<0时表示向下滚动，e.wheelDelta>0时向上滚动
			 * 用到的公式：滚动距离/（页面高-可视窗口高）  == bar距div的top/(滚动条div-滚动条bar)
			 * 代码:box.scrollTop/(content.offsetHeight-document.body.offsetHeight)  == scrollBar.style.top/(scrollDiv.offsetHeight - scrollBar.offsetHeight);
			 */
			/*box.addEventListener("mousewheel",function(e){
				e =e||event;
				//console.log(e.wheelDelta);
				if(e.wheelDelta<0){
					box.scrollTop += 50; //滚动的距离
				}else{
					box.scrollTop -=50;
				}
				scrollBar.style.top = box.scrollTop/(content.offsetHeight-document.body.offsetHeight) *(scrollDiv.offsetHeight - scrollBar.offsetHeight)+"px";
				if(box.scrollTop<300){
					scrollDiv.style.opacity = 0;
				}else{
					scrollDiv.style.opacity = 1;
				}
			})
			
			box.addEventListener("DOMMouseScroll",function(e){
				e =e||event;
				//console.log(e.detail);
				if(e.detail>0){
					box.scrollTop +=50;
				}else{
					box.scrollTop -=50;
				}
				//兼容document.body.offsetHeight  
				console.log(document.body.offsetHeight);
				scrollBar.style.top = box.scrollTop/(content.offsetHeight-document.body.offsetHeight)*(scrollDiv.offsetHeight - scrollBar.offsetHeight)+"px";
				if(box.scrollTop <300){
					scrollDiv.style.opacity = 0;
				}else{
					scrollDiv.style.opacity = 1;
				}
			})
			*/
			/*
			 * 由上述整理精炼得到如下代码：
			 */
			
			function scrollFunc(e){ //e.type :返回的值是mousewheel或是DOMMouseScroll
				e =e||even;
				var d = null;
				if(e.type == "mousewheel"){
					d = e.wheelDelta;
				}else {
					d = -e.detail;
				}
				
				if(d<0){
					box.scrollTop +=50;
				}else{
					box.scrollTop -=50;
				}
				setScroll();
				if(box.scrollTop<300){
					scrollDiv.style.opacity = 0;
				}else{
					scrollDiv.style.opacity = 1;
				}
				
			}
		
		
		box.addEventListener("mousewheel",scrollFunc);
		box.addEventListener("DOMMouseScroll",scrollFunc);
		//当对窗口大小进行调整时
		window.addEventListener("resize",function(e){
			setScroll();
		});			
			function setScroll(){
				scrollBar.style.top = box.scrollTop/(content.offsetHeight-document.body.offsetHeight)*(scrollDiv.offsetHeight - scrollBar.offsetHeight)+"px";
			}
			//点击scrollBar可以拖拽，并且页面随之滑动
			draggable(scrollDiv,scrollBar,{x:false},function(){
				box.scrollTop = this.offsetTop *(content.offsetHeight -document.documentElement.offsetHeight)/(scrollDiv.offsetHeight -this.offsetHeight);
			});
			//双击回到最顶部
			scrollDiv.addEventListener("dblclick",function(){
				box.scrollTop=0;
				scrollBar.style.top =0;
				
			})
		}
		
		
	</script>
</html><!DOCTYPE html>
<html>
	<head>
		<meta charset=