摘要：要實(shí)現(xiàn)全屏滾動(dòng)的效果，無(wú)非是讓每頁(yè)的內(nèi)容頁(yè)高度達(dá)到瀏覽器窗口的高度。通過(guò)判斷鼠標(biāo)滾動(dòng)事件來(lái)設(shè)置定時(shí)器運(yùn)動(dòng)方式。每頁(yè)高度在實(shí)現(xiàn)滾輪的時(shí)候存在兼容性的問(wèn)題，首先，對(duì)于鼠標(biāo)滾動(dòng)事件，有自己的解決方法，方法叫，鼠標(biāo)滾動(dòng)的時(shí)候觸發(fā)。

要實(shí)現(xiàn)全屏滾動(dòng)的效果，無(wú)非是讓每頁(yè)的內(nèi)容頁(yè)高度達(dá)到瀏覽器窗口的高度。通過(guò)判斷鼠標(biāo)滾動(dòng)事件來(lái)設(shè)置定時(shí)器運(yùn)動(dòng)方式。
基本的html結(jié)構(gòu)：

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;
}

如上，需要設(shè)置每個(gè)page項(xiàng)的高度大小都為窗口高度大小，并且，最外層容器，也就是wrap的高度也是一樣，如果漏了設(shè)置wrap高度，每頁(yè)的高度也是正常的，但是最后滾動(dòng)的時(shí)候?qū)嶋H上會(huì)漏出其他頁(yè)的內(nèi)容。

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
javascript在實(shí)現(xiàn)滾輪的時(shí)候存在兼容性的問(wèn)題，首先，對(duì)于鼠標(biāo)滾動(dòng)事件，firefox有自己的解決方法，方法叫DOMMouseScroll，鼠標(biāo)滾動(dòng)的時(shí)候觸發(fā)。其有關(guān)鼠標(biāo)滾輪的信息則保存在detail屬性中，當(dāng)向前滾動(dòng)滾輪時(shí)，其值為-3的倍數(shù)，當(dāng)向后滾動(dòng)滾輪時(shí)，其值為3的倍數(shù)。
其他瀏覽器（包括煩人的IE6、7）有一個(gè)名叫“mousewheel”的事件，該事件可以在任何元素上觸發(fā)，而且可以冒泡(前面那個(gè)DOMMouseScroll也可以)，該事件有一個(gè)屬性叫“wheelDelta”，向上滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是120的倍數(shù)；向下滾動(dòng)鼠標(biāo)滾輪時(shí)，wheelDelta是-120的倍數(shù)。
為了兼容，可以通過(guò)下面的方式：
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;  
} 
滾動(dòng)事件處理函數(shù)無(wú)非就是判斷wheelDelta和delta的值還有外部容器main.offsetTop的值，然后觸發(fā)動(dòng)畫(huà)效果，這里要注意，為了防止多次觸發(fā)，比如用戶在短時(shí)間內(nèi)瘋狂滾滾輪，然而不想要瘋狂觸發(fā)，那么需要在觸發(fā)動(dòng)畫(huà)前后通過(guò)定時(shí)器設(shè)定閥值。
具體的實(shí)現(xiàn)參考下面代碼，已經(jīng)有注釋了：
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;i0 && parseInt(main.offsetTop) > -(pageH*(pageLen-1))){
            //向下滾動(dòng)
            now = now - pageH; //向下翻過(guò)一頁(yè)
            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){
            //向上滾動(dòng)
            now = now + pageH;
            toPage(now,"up");
        }
        endTime = new Date().getTime();  //重置時(shí)間
    }else{  
        event.preventDefault();    
    }    
}
var sliderTime = null;
function toPage(now,direction){    
    clearInterval(sliderTime);//執(zhí)行當(dāng)前動(dòng)畫(huà)同時(shí)清除之前的動(dòng)畫(huà)
    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{  //當(dāng)now的高度達(dá)到整個(gè)頁(yè)面高度，結(jié)束運(yùn)動(dòng)
                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實(shí)現(xiàn)動(dòng)畫(huà)效果
         setTimeout("main.style.top = now + "px"",1000);     //javascript 實(shí)現(xiàn)動(dòng)畫(huà)效果
    }