全屏滚动的原理及实现

1.用到知识点：

  1.1 设置main定位为relative，通过改变main块的top属性实现不同页面的切换

   1.2 对滚动事件：

           1.2.1大多数浏览器提供了 “mousewheel” 事件，

            1.2.2Firefox 3.5+不支持，支持相同作用的事件：”DOMMouseScroll”

    1.3    mousewheel事件   返回值：“event.wheelDelta” ：正值 => 滚轮是向上滚动；

            DOMMouseScroll事件    “event.detail” : 负值 = > 滚轮是向上滚动

代码如下：

   

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html,body{
		margin: 0;
		padding: 0;
		}
		#wrap{
			width: 100%;
			overflow: hidden;
			background: #ccc;
		}
		#main{
			width: 100%;
			background: #ccc;
			position: relative;
			top:0;
			transition: all 1s ease;
		}
		.page{
		    width:100%;
		    margin:0;
		}
		#page1{
		    background:#E4E6CE;
		}
		#page2{
		    background:#6CE26C;
		}
		#page3{
		    background:#BF4938;
		}
		#page4{
		    background:#2932E1;

	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>   
<div id="wrap">
    <div id="main">
        <div id="page1" class="page">page1</div>
        <div id="page2" class="page">page2</div>
        <div id="page3" class="page">page3</div>
        <div id="page4" class="page">page4</div>
        <div id="page5" class="page">page5</div>
    </div>	
</div>
</body>
<script>

	$(function(){
		getSize()
		$(window).resize(function(){
			now = 0;
			main.style.top = now;
			getSize()
		})
		// 对滚动事件的函数绑定，大多数浏览器提供了 “mousewheel” 事件，Firefox 3.5+不支持，但支持相同作用的事件：”DOMMouseScroll”；
		if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
			document.addEventListener("DOMMouseScroll",scrollFun);
		}else if(document.addEventListener){
			document.addEventListener("mousewheel",scrollFun,false);
		}else if(document.attachEvent){
			document.attachEvent("onmousewheel",scrollFun);
		}else{
			document.onmousewheel = scrollFun;
		}

	})



	var pages = document.getElementsByClassName("page");
	var wrap = document.getElementById("wrap");
	var main = document.getElementById("main");
	function getSize(){
		var len = document.documentElement.clientHeight || document.body.clientHeight;
		wrap.style.height = len + "px";
		for(var i=0; i<pages.length; i++){
			pages[i].style.height = len + "px";
		}
		
	}

	var startTime = 0;
	var endTime = 0;
	var now = 0;
	function scrollFun(e){
		
		var len = document.documentElement.clientHeight || document.body.clientHeight;/*当前page高度设置*/
		startTime = new Date().getTime();
		var event = e || window.event;
		var dir = event.detail || -event.wheelDelta; /*event.detail:正值说明滚轮是向上滚动*/
		var pageLength = pages.length - 1; /*page 数量*/
		
		if(startTime - endTime > 1000){
			if(dir>0 && now > -pageLength*len){
				// 向上
				now -= len;
				main.style.top = now +"px";
				endTime = new Date().getTime();

			}else if(dir<0 && now < 0){
				now += len;
				main.style.top = now +"px";
				endTime = new Date().getTime();
			}
		}else{
			return false 
		}
	}

</script>
</html>
<!-- 参考 https://blog.csdn.net/Rita_jing/article/details/78236768 -->

　　

posted @ 2020-06-05 10:19  牧唐丫  阅读(680)  评论(0)    收藏  举报