티스토리 무한스크롤(infinite scroll)

본 포스팅은 티스토리 포럼에 올라온 질문을 토대로 작성합니다. 무한 스크롤을 적용하기 전에 꼭 단점이 무엇인지 알아보고 적용하시기를 바랍니다. 특히 뒤로 가기 시 문제점 등 구글링을 하시면 많은 정보가 있습니다.

티스토리 #2 스킨 무한 스크롤

자바스크립트 라이브러리인 infinite scroll을 티스토리 #2 스킨에 적용해 봅시다.

무한스크롤을 #2스킨에 적용하기 위해서는 인덱스페이지 목록을 페이지네이션과 분리되도록 박스로 한번 감싸 줘야 합니다. 블로그 관리에서 HTML 편집 창으로 이동합니다. <s_article_rep>을 찾습니다.

아래와 같이 시작 부분과 끝나는 부분까지 inner 클래스로 감싸 줍니다.

<div class="inner">
<s_article_rep>
...
</s_article_rep>
</div>

다음에 </body>윗부분에 아래 코드를 넣어 줍니다.

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
<script>
if (document.querySelectorAll(".list_content").length > 0) {
  document.querySelector('.area_paging').style.display = "none";

  var elem = document.querySelector('.article_skin .inner');
  var infScroll = new InfiniteScroll(elem, {
    path: '.btn_next',
    append: '.list_content',
    hideNav: '.area_paging',
    history: false,
  });
}
</script>

이제 상단에 적용 버튼을 클릭하고 본인의 블로그로 가서 확인합니다. 어렵지 않죠?

티스토리 무한스크롤(infinite scroll)

티스토리 #2 스킨 무한 스크롤

티스토리툴바