上代码:
<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) } } })