全屏滚动

掠影浮华

于 2019-02-27 11:50:59 发布

阅读量122

点赞数

分类专栏：学习文章标签： js 滚轴 deltaY

本文链接：https://blog.csdn.net/weixin_44088986/article/details/87969931

版权

学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		
		.box {
			width: 100%;
			height: 100vh;
			overflow: hidden;
		}
		
		.zbox {
			position: relative;
			height: 100vh;
			transition: all 1s ease;
			top: 0;
		}
		
		.zbox div {
			width: 100%;
			height: 100vh;
			font-size: 30px;
			text-align: center;
			line-height: 100vh;
			position: relative;
		}
		
		.zbox div:nth-of-type(1) {
			background: red;
		}
		
		.zbox div:nth-of-type(2) {
			background: blue;
		}
		
		.zbox div:nth-of-type(3) {
			background: palevioletred;
		}
		
		.zbox div:nth-of-type(4) {
			background: coral;
		}
	</style>

	<body>
		<div class="box">
			<div class="zbox">
				<div>第一版</div>
				<div>第二版</div>
				<div>第三版</div>
				<div>第四版</div>
			</div>v

		</div>
	</body>
	<script type="text/javascript">
		var obox = document.getElementsByClassName("zbox")[0]

		//		document.addEventListener("onwheel",gun());
		var i = 0;
		var kai = true;
		obox.addEventListener("wheel", function(ev) {
			var ev = window.event || ev;
			var he = ev.deltaY;
			if(kai) {
				kai = false;
				if(he >= 0) {
					i++;
					obox.style.top = -he * i + "vh"
					if(obox.style.top >= "-300vh") {
						obox.style.top = -300 + "vh";
						i = 3;
					}
					console.log(i)
					setTimeout(function() {
						kai = true;
					}, 1000)
				} else if(he < 0) {
					i--;
					
					if(obox.style.top >= "0vh") {
						obox.style.top = 0 + "vh";
						i = 0;
						console.log(i)
					}
					obox.style.top = he * i + "vh"
					setTimeout(function() {
						kai = true;
					}, 1000)
				}
			}
			console.log(obox.style.top)
		})
				obox.addEventListener("DOMMouseScroll", function(ev) {
					var ev = window.event || ev;
			var he = ev.deltaY;
			if(kai) {
				kai = false;
				if(he < 0) {
					i++;
					obox.style.top = -he * i + "vh"
					if(obox.style.top >= "-300vh") {
						obox.style.top = -300 + "vh";
						i = 3;
					}
//					console.log(i)
					setTimeout(function() {
						kai = true;
					}, 1000)
				} else if(he > 0) {
					i--;
					
					if(obox.style.top >= "0vh") {
						obox.style.top = 0 + "vh";
						i = 0;
						console.log(i)
					}
					obox.style.top = he * i + "vh"
					setTimeout(function() {
						kai = true;
					}, 1000)
				}
			}
				})
	</script>

</html>

掠影浮华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全屏滚动

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt; * { paddin
复制链接

扫一扫