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

小z666

发布于 2024-06-21 18:14:36

1300

发布于 2024-06-21 18:14:36

文章被收录于专栏：javajava

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>