스크롤을 움직이거나 버튼을 클릭하면 다음 / 이전 페이지의 내용을 불러오는 플러그인입니다.
설치
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 : (함수) 다음 / 이전 페이지를 불러왔을 때 실행되는 콜백입니다. 로딩이 끝나면 한 번 실행됩니다. 위 콜백과 달리 매개변수를 받지 않습니다.
특징
이전 페이지 불러오기 지원
대부분의 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은 없다면, 다음 페이지는 수동으로, 이전 페이지는 자동으로 불러옵니다.
스크롤바 감지
스크롤 바가 없어 Infinite Scroll이 작동할 수 없는 상황이면 자동으로 다음 페이지의 내용을 불러옵니다.
버그 및 개선 사항 제보
깃허브 이슈 페이지
marshall@kakao.com
댓글
라이센스
이 플러그인은 MIT License를 따릅니다.
