之前用fullpage外掛做過全屏滾動的頁面，今天用js自己實現了一下，還蠻簡單的.

首先html結構為

<div id="wrap">
    <div id="main">
        <div id="page1" class="page"></div>
        <div id="page2" class="page"></div>
        <div id="page3" class="page"></div>
        <div id="page4" class="page"></div>
    </div>	
</div>
 

設定main定位為relative，通過改變main塊的top屬性實現不同頁面的切換，具體的css程式碼如下：

html,body{
margin: 0;
padding: 0;
}
#wrap{
	width: 100%;
	overflow: hidden;
	background: #ccc;
}
#main{
	width: 100%;
	background: #ccc;
	position: relative;
}
.page{
    width:100%;
    margin:0;
}
#page1{
    background:#E4E6CE;
}
#page2{
    background:#6CE26C;
}
#page3{
    background:#BF4938;
}
#page4{
    background:#2932E1;
}
 

mousewheel事件“event.wheelDelta” 屬性值：返回的如果是正值說明滾輪是向上滾動；

DOMMouseScroll事件“event.detail” 屬性值：返回的如果是負值說明滾輪是向上滾動;每頁高度為document.body.clientHeight+’px’;

具體程式碼如下：

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";
}
if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
	document.addEventListener("DOMMouseScroll",scrollFun);
}else if(document.addEventListener){
	document.addEventListener("mousewheel",scrollFun,false);
}else if(document.attachEvent){
	document.attachEvent("onmousewheel",scrollFun);
}else{
	document.onmousewheel = scrollFun;
}
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){
		if(dir>0 && now > -3*len){
			now -= len; 
			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();    
	}
}