前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【前端篇】前端实现滚动分屏效果

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

作者头像
小z666
发布2024-06-21 18:14:36
发布2024-06-21 18:14:36
2720
举报
文章被收录于专栏:java
1、先放效果

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

2、再放代码
代码语言:javascript
复制
<!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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-06-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、先放效果
  • 2、再放代码
  • 3、解读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档