【前端篇】前端实现滚动分屏效果

1、先放效果

鼠标滚动，整个100%高度宽度的屏幕进行切换

2、再放代码

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