全屏滚动
2020-03-28 本文已影响0人
LilyLaw
做了一个简单的全屏滚动，代码如下，比较简单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
overflow: hidden;
}
html, body, #container{
height: 100%;
}
#container{
position: relative;
}
.sections{
position: absolute;
top: 0;
width: 100%;
transition: top .5s ease-in;
}
.section{
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
.section:nth-child(1){
background-image: url("http://seopic.699pic.com/photo/50156/2840.jpg_wh1200.jpg");
}
.section:nth-child(2){
background-image: url("http://seopic.699pic.com/photo/50148/0957.jpg_wh1200.jpg");
}
.section:nth-child(3){
background-image: url("http://seopic.699pic.com/photo/50146/0835.jpg_wh1200.jpg");
}
.section:nth-child(4){
background-image: url("http://seopic.699pic.com/photo/50021/1012.jpg_wh1200.jpg");
}
</style>
</head>
<body>
<div id="container">
<div class="sections">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</div>
<script type="text/javascript">
let wh = parseInt(window.innerHeight),
ele = document.getElementsByClassName('sections')[0],
eachSection = document.getElementsByClassName('section'),
flag = true;
renderHeight();
function renderHeight(){
ele.style.height = wh*eachSection.length +"px";
for(let i=0;i<eachSection.length;i++){
eachSection[i].style.height = wh+"px";
}
}
document.addEventListener('mousewheel',function(e){
if(flag){
let nowt = Math.abs(parseInt( getComputedStyle(ele).top));
if(e.deltaY > 0 && nowt < wh*(eachSection.length - 1)){ //向下滑动
ele.style.top = -(nowt+wh)+"px";
}else if(e.deltaY < 0 && nowt > 0){ // 向上滑动
ele.style.top = -nowt+wh+"px";
}
flag = false;
setTimeout(function(){
flag = true;
},500);
}
});
</script>
</body>
</html>
