全屏滑动效果
上代码:
<div id="wrap" class="wrap"> <div id="main" class="main"> <div class="full-page" style="background-color: aqua;"></div> <div class="full-page" style="background-color: cadetblue"></div> <div class="full-page" style="background-color: chartreuse;"></div> <div class="full-page" style="background-color: darkcyan;"></div> </div> </div>
*{
padding: 0;
margin: 0;
}
body{
height: 100%;
overflow: hidden;
}
.wrap{
height: 100vh;
}
.main{
transition:ease-in .6s;
position: relative;
top: 0;
}
.main > div{
height: 100vh;
}
let h = document.getElementById('wrap').offsetHeight
let num = 0
let isScroll = false
let len = document.getElementsByClassName('full-page').length
window.addEventListener('mousewheel', function(e){
if(e.wheelDelta < 0 && num<len-1){
// console.log('下滑')
if(!isScroll){
num++
document.getElementById('main').style.top = '-'+num*h+'px'
isScroll = true
setTimeout(()=>{
isScroll = false
},1200)
}
}
if(e.wheelDelta > 0 && num>0){
// console.log('上滑')
if(!isScroll){
num--
document.getElementById('main').style.top = '-'+num*h+'px'
isScroll = true
setTimeout(()=>{
isScroll = false
},1200)
}
}
})

浙公网安备 33010602011771号