pageable 풀페이지 구획별로 다르게 적용하기

최근 브랜드 페이지 또는 포트폴리오 페이지를 구현할 때, 브라우저 전체 화면으로 구획마다 스크롤되는 방식을 많이 사용한다.

fullPage.js가 가장 많이 쓰이는 것으로 보이는데, 3버전부터는 유료이므로 라이센스를 구매해야 한다.

다른 플러그인은 Pageable이 있는데 상업적 이용이 가능한 MIT 라이센스이다.

fullPage.js에 비하면 기본적인 기능만 있다고 볼 수 있지만 보편적인 웹 페이지를 구성하는 데는 무리가 없다.

관련 링크

LINK

fullPage.js - 플러그인 사이트

LINK

fullPage.js - GitHub

LINK

Pageable - GitHub

 

Pageable에서 스크롤 구획과 일반 구획 혼합하기

대부분의 풀페이지 사이트를 보면 각각의 구획이 모두 전체 화면 단일 페이지이다.

구획마다 스크롤이 되다가 중간에 어느 구획에서는 일반적인 사이트들처럼 스크롤이 되고, 다시 해당 구획을 벗어나면 풀페이지 스크롤이 되는 방식을 구현하고자 한다.

여기에서 확인 가능한 fullPage.js의 확장 기능과 동일한 기능(이것도 또 유료).

 

구현한 코드

두가지 방법 중 하나를 이용해서 조건문에 활용한다(본문에서는 overflow 활용).

• css(overflow) : pageable을 적용한 페이지는 body의 overflow 속성이 hidden으로 설정된다는 점을 이용한다.
• typeof(pages) : pages 객체가 존재하면 타입이 object로, 그렇지 않다면 undefined로 출력 된다.

 

<!--  생략 -->
<div data-anchor="page-1" id="page-1">1</div>
<div data-anchor="page-2" id="page-2">2</div>
<div data-anchor="page-3" id="page-3">3</div> <!-- 3번 : 일반 스크롤하는 구획 -->
<div data-anchor="page-4" id="page-4">4</div>
<div data-anchor="page-5" id="page-5">5</div>
<!--  생략 -->
<script>
const pages = new Pageable("#wrap", {
	childSelector: "[data-anchor]",
// 생략
	onFinish: function() {
		if( this.index == 3 ) {
			console.log( "die" );
			this.destroy();
		}
	}

3번 구획에 진입했을 때 객체를 제거하면 일반 스크롤로 전환된다(body의 overflow 속성이 hidden이 아니게 됨).

이제 스크롤을 위로 올려서 2번 구획으로 진입하거나, 아래로 내려서 4번 구획에 진입하는 경우 다시 풀페이지 스크롤로 전환되어야 한다.

 

<script>
// 해당 엘리먼트가 브라우저 화면 내에 존재하는지 확인하는 함수
$.expr.filters.offscreen = function(el) {
    var rect = el.getBoundingClientRect();
    return (
        (rect.x + rect.width) < 0
            || (rect.y + rect.height) < 0
            || (rect.x > window.innerWidth || rect.y > window.innerHeight)
        );
};

$(window).on("mousewheel", function() {

    var isAlive = $("body").css("overflow");

    if ( isAlive != "hidden" ) {
        if ( !$("#page-2").is(":offscreen") ) {
            pages.init();
        } else if( !$("#page-4").is(":offscreen") ) {
            pages.init();
        }
    }

});

현재 body의 overflow가 hidden이 아니라는 말은 객체가 소멸했다는 뜻이고 3번 구획에 진입했다는 뜻이다.

그럼 스크롤을 계속 위로 올리다 보면 2번, 아래로 내리다 보면 4번이 되므로 다시 pageable 객체를 생성하면 된다.