全屏滾動的原理是什麼？用到了css的哪些屬性？（筆試題）

在學習ES6知識點時，看到了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>

wrap塊爲窗口可看到的部分，我們可以通過js獲取窗口可視區的大小，併爲其設置爲：overflow:hidden屬性，使得窗口不出現滾動條，只顯示窗口大小的一頁內容。
設置main區域，定位爲relative,通過改變main塊的top屬性實現不同頁面的切換，具體的css代碼如下：

html,body{
	margin:0;
	padding:0;
}
#wrap{
	width:100%;
	overflow:hidden;
	background:#111;
}
#main{
	width:100%;
	background:#222;
	position:relative;
}
.page{
	width:100%;
	margin:0;
}

js代碼的主要部分就是對滾動事件的函數綁定，大多數瀏覽器提供了mousewheel事件，Firefox 3.5+不支持，但支持相同作用的事件：DOMMouseScroll;
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.preventDafault();
	}
}

注：以上內容參考其他大神代碼。