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

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

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

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

인피니티 스크롤 : https://infinite-scroll.com/

무한스크롤을 #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>

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

반응형
Comment 5
  • 프로필 이미지
    만물상블로그
    2019.02.15 22:07 신고

    내용 감사드립니다! 추가적인 질문 좀 드려도 될까요. PC에서는 잘 되는데 모바일에서 구현이 안됩니다 ㅠ 모바일 부분 따로 손을 봐야 할까요?

  • 프로필 이미지
    만물상블로그
    2019.02.15 22:13 신고

    아 글목록을 7개로 했더니 정상적으로 보이네요!

    • 프로필 이미지
      원더바웃
      2019.02.15 22:21 신고

      잘 적용 되서 다행 입니다. 블로그 이쁘게 잘 만세요!

  • 프로필 이미지
    양미니
    2019.02.17 10:48 신고

    티스토리 팁 감사합니다! html을 몰라서 많이 헤매고 있거든요~

    자주 방문해서 정보좀 알아갈게요 ㅎㅎ

    • 프로필 이미지
      원더바웃
      2019.02.17 11:40 신고

      제가 더 양미니님 블로그 방문 많이 해야 할 것 같습니다. 영어 공부 욕심 내지 말고 조금씩이라도 해야 할 것 같아요~ 여행 갈때마다 부족함을 많이 느끼게 됩니다.