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
