本文執行個體講述了原生javascript實作的全屏滾動功能。分享給大家供大家參考，具體如下：
原理：
1. 計算目前浏覽器螢幕高度，每次翻頁顯示的内容高度即為螢幕高度
2. 對滑鼠滾輪事件進行監聽，注意滾輪事件的浏覽器相容問題。
廢話不多說，直接上代碼
html代碼：
css代碼：
#wrap{overflow: hidden;width: 100%;}
#main{top: 0;position: relative;}
.content{width: 100%;margin: 0;height: 100%;}
.num1{background: #e8e8e8;}
.num2{background: pink;}
.num3{background: yellow;}
.num4{background: orange;}
js代碼：
var wrap = document.getElementById("wrap");
var divHeight = window.innerHeight;
wrap.style.height = divHeight + "px";
var content = $(".content");//懶得寫擷取類的原生js代碼了，直接用了jquery，=。=
content.height(divHeight);
var startTime = 0, //開始翻屏時間
endTime = 0,
now = 0;
if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){
//for firefox;
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();
var delta = event.detail || (-event.wheelDelta);
if ((endTime - startTime) < -1000) {
//1秒内執行一次翻頁
if (delta > 0 && parseInt(main.style.top) > -divHeight * ( content.length - 1)) { //向下翻頁
now += divHeight ;
turnPage(now);
}
if (delta < 0 && parseInt(main.style.top) < 0) { //向上翻頁
now -= divHeight ;
turnPage(now);
}
endTime = new Date().getTime();
}
else{
event.preventDefault();
}
}
//翻頁函數
function turnPage(now){
$("#main").animate({top:(-now+'px')},1000);
//懶得寫動畫代碼了，直接用了jquery，=。=
}
希望本文所述對大家JavaScript程式設計有所幫助。