html全屏滚动原理,原生javascript实现的全屏滚动功能示例

本文实例讲述了原生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程序设计有所帮助。