[JS] 페이지가 스크롤에 따라 한 페이지씩 올라가는 기능

한 페이지씩 올라가는 스크롤 구현하기

스크롤을 할 때마다 한 페이지씩 넘어가는 사이트를 구현하는 방법 두 가지를 소개해보고자 한다.

📌 fullPage.js 이용

가장 간단한 플러그인을 활용하는 방법이다. 아래는 데모사이트이다. 아래 사이트에 접속하면 fullPage가 어떻게 동작하는지 볼 수 있다.

https://alvarotrigo.com/fullPage/ko/#page1

1) html

<div id="fullpage">
    <div class="section">1</div>
    <div class="section">2</div>
    <div class="section">3</div>
    <div class="section">4</div>
</div>

=> 이런 식으로 class명을 section으로 해주어야한다.

2) 플러그인 적용

<link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css">
<script type="text/javascript" src="../js/jquery.fullPage.js"></script>

3) 스크립트 작성

  $('#fullpage').fullpage({
        slidesNavigation: true,
        responsiveWidth: 1024,
        autoScrolling: true
    });

=> 다음과 같이 스크립트로 fullPage를 호출해주면 된다. 여기엔 다양한 옵션들이 있는데 위에 데모 사이트에서 찾아보면 된다. 자주 쓰는 옵션은 다음과 같다.

📌 js 직접 작성하기

1) html

<div>
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
</div>

2) css

html, body {width: 100%; height: 100%;}
.content{
    height: 100vh;
}

3) js

👉 기본이벤트 제거하기

window.addEventListener("wheel", function(e){
	e.preventDefault();
},{passive : false});

👉 페이지 선언

var $html = $("html");
var page = 1;
var lastPage = $(".content").length;

$html.animate({scrollTop:0},10);

👉 마우스 휠 굴렸을 때 이벤트 넣기

$(window).on("wheel", function(e){
 
	if($html.is(":animated")) return;
 
	if(e.originalEvent.deltaY > 0){
		if(page== lastPage) return;
 
		page++;
	}else if(e.originalEvent.deltaY < 0){
		if(page == 1) return;
 
		page--;
	}
	var posTop = (page-1) * $(window).height();
 
	$html.animate({scrollTop : posTop});
 
});

"wheel" 이벤트를 추가해주는데, 일단 animate 메서드로 생성된 스크롤 효과가 생기지 않도록 막아준다. 그리고 deltaY로 마우스 휠을 어느 방향으로 얼만큼 굴렸는지 알 수 있기때문에 이를 이용하여 deltaY가 양수면 아래쪽으로 굴린 것이고, 음수면 위쪽으로 굴린 것을 각각 구분하여 페이지를 이동시켜준다.

📌 마무리하며..

이렇게 두 가지 방법을 간단히 소개해보았는데 첫 번째 방법인 fullPage.js 플러그인을 사용하면 다른 js와 충돌하는 이슈가 존재하는 것 같다. 때문에 두 번째 방법으로 직접 js를 작성하면 반응형일 때 유연하게 수정할 수 있는 장점도 있으니 두 번째 방법을 추천한다..!