[JS] Infinite Scroll 플러그인

스크롤을 움직이거나 버튼을 클릭하면 다음 / 이전 페이지의 내용을 불러오는 플러그인입니다.

설치

CDN

<!-- 압축 -->
<script src="https://cdn.jsdelivr.net/gh/marshallku/infinite-scroll/dist/infiniteScroll.min.js"></script>
<!-- 원본 -->
<script src="https://cdn.jsdelivr.net/gh/marshallku/infinite-scroll/dist/infiniteScroll.js"></script>

다운로드

infiniteScroll.min.js - 압축된 js
infiniteScroll.js - 원본 js

시작하기

JS 파일 삽입

<script src="파일/경로/infiniteScroll.js"></script>

cdn을 사용하시면 cdn 경로를, 본인이 js 파일을 업로드해 사용하신다면 해당 경로를 script 태그에 넣어서 사이트에 삽입해주세요.

기본적인 HTML 구조

<article id="container">
    <div class="item">내용</div>
    <div class="item">내용</div>
    <div class="item">내용</div>
    <div class="item">내용</div>
</article>

해당 플러그인은 다음 페이지의 내용을 컨테이너에 계속 추가해가는 방식으로 작동합니다.
대상이 되는 요소만 있는 컨테이너를 만드시는 걸 추천합니다.

초기 내용 설정

infiniteScroll({
    container: "#container",
    item: ".item",
    next: ".next"
})

기본적으로 플러그인을 사용하기 위해선 container, item, next 세 가지 옵션이 필요합니다.

item : 다음 페이지에서 불러올 요소
container : item이 추가될 요소
next : 다음 페이지의 링크를 담은 a 태그 (href 필요)

css 선택자를 이용해 추가하시면 됩니다.

기능

prev : (HTML 요소) next와 같습니다만, 이전 페이지의 링크를 담은 a 태그

nextButton : (HTML 요소) 추가하시면 다음 페이지를 자동으로 불러오지 않고 버튼을 클릭해야 불러옵니다.
prevButton : (HTML 요소) 추가하시면 이전 페이지를 자동으로 불러오지 않고 버튼을 클릭해야 불러옵니다.

nextLoader : (HTML 요소) 추가하시면 다음 페이지를 로딩하는 중에 해당 요소에 "reveal"이란 class를 추가합니다.
prevLoader : (HTML 요소) 추가하시면 이전 페이지를 로딩하는 중에 해당 요소에 "reveal"이란 class를 추가합니다.

pushHistory : (Boolean, 기본값 : false) 참이면 다음 페이지를 불러오면 주소창의 주소를 해당 페이지의 주소로 변경합니다.
autoPrev : (Boolean, 기본값 : false) 참이면 이전 페이지를 불러올 때 첫 페이지까지 멈추지 않고 불러옵니다.
detectLoad : (Boolean, 기본값 : true) 참이면 다음 / 이전 페이지를 불러왔을 때 해당 페이지의 아이템에 포함된 이미지를 모두 불러오기 전까진 로딩 중이라 처리합니다.

nextCallback : (함수) 다음 페이지를 불러왔을 때 실행되는 콜백입니다. 각각 아이템에 개별적으로 실행되는 콜백입니다. 매개변수를 하나 추가하시면 아이템에 접근하실 수 있습니다.
prevCallback : (함수) 이전 페이지를 불러왔을 때 실행되는 콜백입니다. 각각 아이템에 개별적으로 실행되는 콜백입니다. 매개변수를 하나 추가하시면 아이템에 접근하실 수 있습니다.

infiniteScroll({
    container: "#container",
    item: ".item",
    next: ".next",
    prev: ".prev",
    nextCallback: (newElement) => {
        // 바닐라
        newElement.classList.add("foo")
        // jQuery
        $(newElement).addClass("foo")
    },
    prevCallback: function(newElement) {
        newElement.style.opacity = "0.5"
    }
})

간단한 콜백 예시입니다.
function() 혹은 () => 로 반드시 감싸주셔야 합니다.
Masonry와 함께 이용하실 때 유용합니다.
아래에 따로 Masonry와 함께 사용하는 예제를 첨부하겠습니다.

onLoadFinish : (함수) 다음 / 이전 페이지를 불러왔을 때 실행되는 콜백입니다. 로딩이 끝나면 한 번 실행됩니다. 위 콜백과 달리 매개변수를 받지 않습니다.

특징

이전 페이지 불러오기 지원

데모 3번째 페이지

대부분의 infinite scroll 플러그인이 뒤로 가기 버튼을 누르면 첫 페이지로 돌아가거나, 이전 페이지로 돌아가기 힘든 구조입니다만, 이 플러그인은 다양한 옵션으로 이전 페이지의 글도 볼 수 있도록 했습니다.

Masonry 등 사용 가능

const msnry = new Masonry(document.getElementById("container"), {
    itemSelector: ".item",
    columnWidth: ".item",
    gutter: ".gutterSizer",
    percentPosition: !0
});
 
infiniteScroll({
    container: "#container",
    item: ".item",
    next: ".next",
    prev: ".prev",
    prevLoader: ".prevLoader",
    pushHistory: true,
    nextCallback: (newElement) => {
        msnry.appended(newElement)
    },
    prevCallback: (newElement) => {
        msnry.prepended(newElement)
    },
    onLoadFinish: () => {
        msnry.layout()
    }
}),
 
window.addEventListener("load", () => {
    msnry.layout()
})

위 페이지를 제작하는 데 사용한 자바스크립트입니다. callback 함수를 추가해 간단하게 masonry 등의 플러그인도 사용하실 수 있습니다.

버튼 이용하기

infiniteScroll({
    container: "#container",
    item: ".item",
    next: ".next",
    prev: ".prev",
    nextButton: ".nextBtn",
    prevButton: ".prevBtn",
    nextLoader: ".nextLoader",
    prevLoader: ".prevLoader",
    pushHistory: true
})

자동으로 다음 페이지를 불러오는 게 마음에 들지 않으시면 위 예제처럼 버튼을 이용하실 수 있습니다.
물론 nextButton, prevButton 둘 다 사용하실 필욘 없습니다.
nextButton은 있지만 prevButton은 없다면, 다음 페이지는 수동으로, 이전 페이지는 자동으로 불러옵니다.