本文实例讲述了原生javascript实现的全屏滚动功能。分享给大家供大家参考，具体如下：
原理：
1. 计算当前浏览器屏幕高度，每次翻页显示的内容高度即为屏幕高度
2. 对鼠标滚轮事件进行监听，注意滚轮事件的浏览器兼容问题。
废话不多说，直接上代码
css代码：
js代码：
获取类的原生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",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相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
原文链接：https://www.f2er.com/js/36276.html