全屏滚动

全屏滚动实现：类似于轮播图，整体的元素一直排列下去。每个需要全屏展示的页面的高度设置为显示高度。

实现：

HTML结构：

<div id="wrap">
		<div id="main">
			<div id="page1" class="page">第1屏</div>
			<div id="page2" class="page">第2屏</div>
			<div id="page3" class="page">第3屏</div>
			<div id="page4" class="page">第4屏</div>
		</div>
	</div>

CSS代码：

<style>
		html,body{
			margin: 0;
			padding: 0;
		}
		#wrap{
			width: 100%;
			overflow: hidden;
			background-color: #ccc;
		}
		#main{
			width: 100%;
			background-color: #ccc;
			position: relative;
			top:0;
			transition: all 2s ease;
		}

		.page{
			width: 100%;
			margin: 0;
			
		}
		#page1{
			background: #E4E6CE;			
		}
		#page2{
		    background:#6CE26C;
		}
		#page3{
		    background:#BF4938;
		}
		#page4{
		    background:#2932E1;
		}

	</style>

javascript代码：

var pages = document.getElementsByClassName("page");
		var wrap = document.getElementById("wrap");
		var len = document.documentElement.clientHeight;		
		var main = document.getElementById("main");

		wrap.style.height = len + "px";

		for(var i=0; i<pages.length; i++){
			pages[i].style.height = len + "px";
		}

		document.addEventListener("mousewheel",scrollFun,false);
		
		var startTime = 0;
		var endTime = 0;
		var now = 0;
		function scrollFun(e){
			startTime = new Date().getTime();
			var event = e || window.event;
			var dir = event.detail || -event.wheelDelta;
			if(startTime - endTime > 1000){
				console.log(startTime - endTime );
				if(dir>0 && now > -3*len){
					now -= len; 
					console.log(now);
					main.style.top = now +"px";
					endTime = new Date().getTime();
				}else if(dir<0 && now < 0){
					now += len;
					main.style.top = now +"px";
					endTime = new Date().getTime();
				}
			}else{
		        event.preventDefault();    
			}
		}