实现简单的全屏滚动

builder2991

已于 2023-06-26 16:51:14 修改

阅读量1k

点赞数 1

分类专栏： javascript 文章标签：全屏滚动

于 2020-05-11 17:00:09 首次发布

本文链接：https://blog.csdn.net/low666/article/details/106057065

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

实现简单的全屏滚动

原理： 有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease；

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全屏滚动</title>
<style type="text/css">
html,body{  
    margin: 0;  
    padding: 0;  
}  
#wrap{  
    width: 100%;  
    overflow: hidden;  
    background: #ccc;  
}  
#main{  
    width: 100%;  
    background: #ccc;  
    position: relative;  
}  
.page{  
    width:100%;  
    margin:0 auto;  
	text-align:center;
	color:white;
	font-size: 100px;
}  
#page1{  
    background:#6CE26C;  
}  
#page2{  
    background:#6495ED;  
}  
#page3{  
    background:#FFC0CB;  
}  
#page4{  
    background:#FF7F50;  
}  
#page5{  
    background:#000000;  
} 
</style>
</head>
<body>
<div id="wrap">  
    <div id="main">  
        <div id="page1" class="page">第一页</div>  
        <div id="page2" class="page">第二页</div>  
        <div id="page3" class="page">第三页</div>  
        <div id="page4" class="page">第四页</div>  
		<div id="page5" class="page">第五页</div>  
    </div>      
</div>
<script>
    var pages = document.getElementsByClassName("page");
	  // console.log(pages.length);
    var wrap = document.getElementById("wrap");
    var len = document.documentElement.clientHeight; 
	 // console.log(len);
    var main = document.getElementById("main");  
    wrap.style.height = len + "px";  
    for(var i=0; i<pages.length; i++){  
        pages[i].style.height = len + "px";  
    }  
    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 startTime = 0;  
    var endTime = 0;  
    var now = 0;  
    function scrollFun(e){  
        startTime = new Date().getTime();  
        var event = e || window.event;  
		// console.log(event);
        var dir = event.detail || -event.wheelDelta;  
		// console.log(dir);
        if(startTime - endTime > 1000){  
            if(dir>0 && now > -4*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{  
            event.preventDefault();      
        }  
    }  
</script>  
</body>
</html>