鼠标滚动,整个100%高度宽度的屏幕进行切换
<!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>
上面代码可以拿去直接使用了,下面进行解读:
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