原生javascript實現簡單的全屏效果

要實現全屏滾動的效果，無非是讓每頁的內容頁高度達到瀏覽器窗口的高度。經過判斷鼠標滾動事件來設置定時器運動方式。
基本的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>

CSS:

*{
    margin:0;
    padding:0;
 }
#wrap{
    overflow: hidden;
    width:100%;
}
#main{
    height:100%;
    top:0;
    position: relative;
}
.page{
    width:100%;
    margin:0;
}
#page1{
    background:#555;
}
#page2{
    background:#6CE26C;
}
#page3{
    background:#fcfc46;
}
#page4{
    background:#ff0000;
}

如上，須要設置每一個page項的高度大小都爲窗口高度大小，而且，最外層容器，也就是wrap的高度也是同樣，若是漏了設置wrap高度，每頁的高度也是正常的，可是最後滾動的時候實際上會漏出其餘頁的內容。

var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var pages = main.getElementsByClassName("page");
var pageLen = pages.length;
var pageH = document.body.clientHeight||document.documentElement.clientHeight;
wrap.style.height = pageH + "px";
console.log("wrap:"+wrap.style.height);
for(var i=0;i<pages.length;i++){  //每頁高度
    pages[i].style.height = pageH + "px";
}

javascript在實現滾輪的時候存在兼容性的問題，首先，對於鼠標滾動事件，firefox有本身的解決方法，方法叫DOMMouseScroll，鼠標滾動的時候觸發。其有關鼠標滾輪的信息則保存在detail屬性中，當向前滾動滾輪時，其值爲-3的倍數，當向後滾動滾輪時，其值爲3的倍數。
其餘瀏覽器（包括煩人的IE六、7）有一個名叫「mousewheel」的事件，該事件能夠在任何元素上觸發，並且能夠冒泡(前面那個DOMMouseScroll也能夠)，該事件有一個屬性叫「wheelDelta」，向上滾動鼠標滾輪時，wheelDelta是120的倍數；向下滾動鼠標滾輪時，wheelDelta是-120的倍數。
爲了兼容，能夠經過下面的方式：

if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){   
    document.addEventListener("DOMMouseScroll",scrollFun,false);        
}else if (document.addEventListener) {  
    document.addEventListener("mousewheel",scrollFun,false);  
}else if (document.attachEvent) {  
    document.attachEvent("onmousewheel",scrollFun);   
}else{  
    document.onmousewheel = scrollFun;  
}

滾動事件處理函數無非就是判斷wheelDelta和delta的值還有外部容器main.offsetTop的值，而後觸發動畫效果，這裏要注意，爲了防止屢次觸發，好比用戶在短期內瘋狂滾滾輪，然而不想要瘋狂觸發，那麼須要在觸發動畫先後經過定時器設定閥值。
具體的實現參考下面代碼，已經有註釋了：

var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var pages = main.getElementsByClassName("page");
var pageLen = pages.length;
var pageH = document.body.clientHeight||document.documentElement.clientHeight;
wrap.style.height = pageH + "px";  //注意
console.log("wrap:"+wrap.style.height);
for(var i=0;i<pages.length;i++){   //每頁高度
    pages[i].style.height = pageH + "px";
}


var startTime = 0, //滾動起始時間  
    endTime = 0,  //滾動結束
    now = 0;     //當前時間
if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){   
    document.addEventListener("DOMMouseScroll",scrollFun,false);        
}else if (document.addEventListener) {  
    document.addEventListener("mousewheel",scrollFun,false);  
}else if (document.attachEvent) {  
    document.attachEvent("onmousewheel",scrollFun);   
}else{  
    document.onmousewheel = scrollFun;  
}  

//滾動事件處理函數
function scrollFun(event){
    startTime = new Date().getTime(); //和endTime組成閥值
    var delta = event.detail || (-event.wheelDelta);//向上滾動爲負，向下滾動爲正
    //mousewheel事件中的 「event.wheelDelta」 屬性值：返回的若是是正值說明滾輪是向上滾動
    //DOMMouseScroll事件中的 「event.detail」 屬性值：返回的若是是負值說明滾輪是向上滾動
    if ((endTime - startTime) < -1000){  //1s以內
        if(delta>0 && parseInt(main.offsetTop) > -(pageH*(pageLen-1))){
            //向下滾動
            now = now - pageH; //向下翻過一頁
            toPage(now,"down");
            console.log("wrap:"+wrap.style.height);
            //console.log("down.now:"+now);
            //console.log("main:"+main.offsetTop);
        } 
        if(delta<0 && parseInt(main.offsetTop) < 0){
            //向上滾動
            now = now + pageH;
            toPage(now,"up");
        }
        endTime = new Date().getTime();  //重置時間
    }else{  
        event.preventDefault();    
    }    
}
var sliderTime = null;
function toPage(now,direction){    
    clearInterval(sliderTime);//執行當前動畫同時清除以前的動畫
    sliderTime = setInterval(function(){
        var speed = 0;
        if(direction == "down"){
            if(now<0 && now < main.offsetTop){
                speed = -10;
                main.style.top = main.offsetTop+speed + "px";
                if(main.style.top<=now){
                    main.style.top = now + "px";
                }
            }else{  //當now的高度達到整個頁面高度，結束運動
                main.style.top = now + "px";
                speed = 0;
                clearInterval(sliderTime);
            }
        }else{
            if(now<=0 && now >= main.offsetTop){
                speed = 10;
                main.style.top = main.offsetTop+speed + "px";
                if(main.style.top>=now){                    
                    main.style.top = now + "px";
                }
            }else{
                main.style.top = now + "px";
                speed = 0;
                clearInterval(sliderTime);
            }
        }        
    },10);
}

上面的toPage方法是帶緩衝的效果，粗暴的方法不帶緩衝：

function toPageNow(now){        
        // $("#main").animate({top:(now+'px')},1000);     //jquery實現動畫效果
         setTimeout("main.style.top = now + 'px'",1000);     //javascript 實現動畫效果
    }