무한스크롤 (Infinity Scroll) UI 구현하기

무한스크롤 (Infinity Scroll) UI 구현하기

---

쇼핑몰이나 상품 또는 게시글 목록에서 갯수가 많아지면 자연스럽게 페이징(Page nate, pagenation 등으로도 불리운다) 처리를 하게 된다. 

 

페이징 UI

페이징 UI

근데 PC에서 쓰이는 페이징 UI를 모바일로 그대로 가져올 경우, 원하는 페이지로 넘어가기 위하여 숫자버튼을 눌러야 하는데 매우 불편하다. 때문에 모바일에서는 보통 상품 목록을 화면에 노출시킬때 Infinity Scroll UI / 무한스크롤 UI를 사용한다.
모든 상품을 한번에 불러올 경우 페이지 로딩 속도에도 문제가 생기기 때문에 최초 특정 갯수 만큼만 노출 로드시킨 뒤, 
사용자가 스크롤을 하면서 최초 노출시킨 목록을 다 보게되면 또 특정 갯수만큼의 목록을 로드하여 사용자로하여금 별도의 행동없이 자연스럽게 목록을 계속 로드 시키는 방식이다.
즉, 스크롤이 화면의 끝에 닿기전에 콘텐츠를 추가로 노출시켜 계속 스크롤하게 만드는 말그대로 무한스크롤 UI이다.

<!-- HTML -->
<header>                
    <h1 class="pageTitle">Infinity scroll</h1>
</header>
<article>
    <div class="block">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
        </p>
    </div>
    <div class="block">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
        </p>
    </div>
    <!-- 반복 -->
</article>

/* CSS */
.pageTitle {position: fixed; left: 0; top: 0; width: 100%; height: 52px; line-height: 52px; color: #fff; text-align: center; background: #111;}
article {padding: 52px 3% 0;}
article .block {padding: 20px; min-height: 500px;}
article .block p {line-height: 22px; color: #fff; font-size: 16px; font-weight: 600;}
article .block:nth-child(2n+1) {background: #999;}
article .block:nth-child(2n) {background: #222;}

보통 ajax를 통하여 추가로 노출되는 콘텐츠를 로드하지만 본 예제에서는 특정 콘텐츠를 변수에 담고 있다가 데이터가 추가되는 시점에 노출시키는 방식으로 표현해볼 생각이다.

 

infinity scroll 마크업

위와 같이 위와 같이 샘플 화면을 작업해두고, 스크롤이 끝에 가면 item을 하나씩 가장 마지막에 추가시킬 예정이다. 그럼 스크롤 바닥을 감지하는 Javascript 코드는 어떻게 만들면 될까?

//Javascript
var count = 0;
//스크롤 바닥 감지
window.onscroll = function(e) {
    //추가되는 임시 콘텐츠
    //window height + window scrollY 값이 document height보다 클 경우,
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    	//실행할 로직 (콘텐츠 추가)
        count++;
        var addContent = '<div class="block"><p>'+ count +'번째로 추가된 콘텐츠</p></div>';
        //article에 추가되는 콘텐츠를 append
        $('article').append(addContent);
    }
};

코드는 생각보다 간단하다. 작동 원리는 윈도우(device)의 높이와 현재 스크롤위치 값을 더한 뒤, 문서(콘텐츠)의 높이와 비교한 뒤 같거나 더 크면 콘텐츠를 추가하는 로직을 실행시켜주면 된다.

 

Infinity scroll 결과물 (계속 콘텐츠가 추가된다)

모바일에서만 국한된 내용으로 오해할 수 있지만 점점 PC웹과 모바일웹의 경계가 모호해지고 있어 PC웹에서도 유용하게 사용 가능하다.

---

최종 HTML, CSS, Javascript 코드는 아래와 같다.

<!-- HTML -->
<header>                
    <h1 class="pageTitle">Infinity scroll</h1>
</header>
<article>
    <div class="block">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
        </p>
    </div>
    <div class="block">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ducimus molestiae eum adipisci.
        </p>
    </div>
    <!-- 반복 -->
</article>

/* CSS */
.pageTitle {position: fixed; left: 0; top: 0; width: 100%; height: 52px; line-height: 52px; color: #fff; text-align: center; background: #111;}
article {padding: 52px 3% 0;}
article .block {padding: 20px; min-height: 500px;}
article .block p {line-height: 22px; color: #fff; font-size: 16px; font-weight: 600;}
article .block:nth-child(2n+1) {background: #999;}
article .block:nth-child(2n) {background: #222;}

//Javascript
var count = 0;
//스크롤 바닥 감지
window.onscroll = function(e) {
    //추가되는 임시 콘텐츠
    //window height + window scrollY 값이 document height보다 클 경우,
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    	//실행할 로직 (콘텐츠 추가)
        count++;
        var addContent = '<div class="block"><p>'+ count +'번째로 추가된 콘텐츠</p></div>';
        //article에 추가되는 콘텐츠를 append
        $('article').append(addContent);
    }
};

---

2019/09/04 - [JavaScript] - 스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트

스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트

2019/09/03 - [UI 클론(Clone)] - 구글 로그인 인풋박스(Google Login Inputbox) UI Clone

구글 로그인 인풋박스(Google Login Inputbox) UI Clone

2019/08/28 - [JavaScript] - 강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

2019/08/28 - [CSS] - CSS 반응형 작업 시 박스 비율 유지하기

CSS 반응형 작업 시 박스 비율 유지하기