全屏滚动的原理及实现
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 -->
