<div id="wrap">
<section class="section" style="background:red;">section1</section>
<section class="section" style="background:orange;">section2</section>
<section class="section" style="background:yellow;">section3</section>
<section class="section" style="background:green;">section4</section>
</div>
스크롤이 될 섹션들을 만들어 줍니다.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#wrap {
position: fixed;
width: 100%;
height: 100%;
background: gray;
}
#wrap .section {
position: relative;
width: 100%;
height: 100%;
}
스타일을 간단하게 입혀줍니다.
var sectionWrap = $('#wrap');
var section = $('.section');
var sectionLen = section.length;
var winHei = $(window).height();
var idx = 0;
var state = false;
section.css({'height': winHei});
section.on('mousewheel DOMMouseScroll', mouseWheel);
function mouseWheel(){
if( state == true ) return;
var delta = window.event.deltaY;
var deltaFireFox = window.event.detail;
( delta > 0 || deltaFireFox > 0 ) ? idx++ : idx --;
indexChk( idx );
}
function indexChk( $idx ){
console.log( $idx, sectionLen )
if( $idx < 0 ){
idx = 0;
return;
}else if( $idx == sectionLen ){
idx = sectionLen-1;
return;
}
// 섹션의 처음이나 끝일 때는 이벤트 리턴
state = true; // 스크롤 연속으로 했을때 빠르게 넘어가는 걸 막기위함
showSection( $idx );
}
function showSection( $idx ){
var posY = -( winHei * $idx );
TweenMax.to( sectionWrap, 0.6, { top: posY, ease: Power4.easeInOut, onComplete:function(){
state = false; // 애니메이션이 끝나면 다시 스크롤이 되도록 함
} } );
}