1、先放效果
鼠标滚动，整个100%高度宽度的屏幕进行切换
2、再放代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 100%;
height: 100vh;
background-color: azure;
overflow: hidden;
}
.big{
top:0px;
transition:0.5s ease;
}
</style>
</head>
<body>
<div class="box">
<div class="big" id="big" style="position: relative;">
<!--第一页-->
<div id="page1" class="page" style="background-color: wheat;height: 100vh;">
</div>
<!--第二页-->
<div id="page2" class="page" style="background-color: red;height: 100vh;">
</div>
</div>
</div>
</body>
<script type="text/javascript">
//滚动条滚动
//判断是不是火狐浏览器
var isFirefox ;
//如果是
if (navigator.userAgent.indexOf('Firefox') >= 0) {
isFirefox = true;
//否则
} else {
isFirefox = false;
}
//定义移动距离
var i=0;
//返回class为big的对象集合，取第一个
var oUl = document.getElementsByClassName("big")[0];
//如果是火狐浏览器
if(isFirefox){
//火狐浏览器绑定滚动事件
document.addEventListener('DOMMouseScroll', function(ev) {
//获取当前对象
var ev = window.event || ev;
//判断滚动的方向
if (ev.detail > 0&&i<1) {
//移动距离 1，为正 1
i ;
//滚动条向下滚动
console.log("滚动向下");
}
//判断滚动的方向
if (ev.detail < 0&&i>0) {
//滚动条向上滚动
//移动距离-1，为负-1
i--;
}
//改变距离顶部的距离，计算距离
oUl.style.top = -i*100 'vh';
console.log(oUl.style.top)
});
}else{
//其他浏览器（同火狐浏览器，只是判断滚动方向的方法不同）
document.addEventListener('mousewheel', function(ev) {
var ev = window.event || ev;
if (ev.wheelDelta < 0&&i<1) {
i ;
//滚动条向下滚动
console.log("滚动向下");
}
if (ev.wheelDelta > 0&&i>0) {
i--;
}
oUl.style.top = -i*100 'vh';
});
}
//滚动条滚动结束
</script>
</html>3、解读
上面代码可以拿去直接使用了，下面进行解读：
1、为了方便切换时进行高度操作，此次使用vh单位，100vh表示100%高度，1vh表示1%高度，相比px更方便自适应。
2、注意上图绝对定位的使用，别使用错了，relative。
3、需要注意火狐浏览器和其他浏览器不同，需要单独判断鼠标滚动方向，如上图的对于浏览器的判断，navigator.userAgent.indexOf('Firefox')方法可以用来判断当前浏览器是不是火狐浏览器。
4、注意：var oUl = document.getElementsByClassName("big")[0];此处要在需要分页的div外层增加一个div，如上图，我的界面是page1和page2，在外层增加一个big。
5、火狐浏览器的滚动条监听事件是DOMMouseScroll，其他浏览器是mousewheel
6、 oUl.style.transition=" 0.5s ease";设置动画效果事件
7、ev.detail判断火狐浏览器的滚动方向，ev.wheelDelta判断其他浏览器的滚动方向，detail>0则是向下滚动，detail<0则是向上滚动；ev.wheelDelta<0则是向上滚动，ev.wheelDelta>0则是向下滚动。（注意）
8、此处，我定义的i值是控制有几页需要分屏，此处我只有两页，所以i的判断到1就可以了，使用时根据实际情况进行修改。
修改于2022/01/13
