全屏滑动效果

上代码:

<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)
	}
  }
})

  

posted @ 2021-03-04 15:08  不要香菜谢谢~  阅读(64)  评论(0编辑  收藏  举报
123456