本文介绍如何使用原生JavaScript结合jQuery实现网页全屏滚动效果。核心原理包括动态计算屏幕高度并设定内容区域尺寸，以及监听鼠标滚轮事件处理翻页逻辑。文章提供了HTML结构、CSS样式及JS交互代码，并特别说明了Firefox等浏览器的滚轮事件兼容性问题，适合需要轻量级滚动交互的开发者参考。
原生JavaScript全屏滚动功能概述
本文通过一个具体实例，展示如何利用原生JavaScript编写全屏滚动功能。该方案旨在为开发者提供可参考的实现思路与代码片段。
全屏滚动核心原理
实现该功能主要依赖以下两个核心原理：
首先，需要动态计算当前浏览器可视窗口的高度，并将每次翻页显示的内容区域高度设置为与该屏幕高度一致，从而确保内容占满整个屏幕。
其次，必须对鼠标滚轮事件进行监听。在此过程中，需特别注意不同浏览器对滚轮事件的支持差异，做好兼容性处理以确保功能正常。
接下来直接展示具体的代码实现部分。
HTML结构代码
HTML结构代码如下：
<div id="wrap">
<div id="main" style="top: 0;">
<div class="content num1">
<img src="https://www.bing.com/az/hprichbg/rb/SingingRingingTree_ZH-CN12497946624_1920x1080.jpg" width="100%" height="100%">
</div>
<div class="content num2">
<img src="https://www.bing.com/az/hprichbg/rb/ShenandoahNP_ZH-CN9981989975_1920x1080.jpg" width="100%" height="100%">
</div>
<div class="content num3">
<img src="https://www.bing.com/az/hprichbg/rb/GareSaintLazare_ZH-CN6611772290_1920x1080.jpg" width="100%" height="100%">
</div>
<div class="content num4">
<img src="https://www.bing.com/az/hprichbg/rb/FriendshipSquare_ZH-CN8820626148_1920x1080.jpg" width="100%" height="100%">
</div>
</div>
</div>
CSS样式定义
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;}
JavaScript交互逻辑
JavaScript逻辑代码如下：
<script type="text/javascript">
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，=。=
}
</script>
若对JavaScript其他技巧感兴趣，可进一步查阅本站相关专题，如《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》等。
希望上述关于JavaScript程序设计的示例内容能对大家有所帮助。