묘연 티스토리 스킨에 Infinite Scroll 적용하기

Tistory/티스토리 팁 2019. 6. 11.

스크롤을 내리면 바로 다음 목록이 불러와지는 기능입니다. (페이지 더 보기 기능과 비슷하죠)

이 기능은 개인 사용은 무료지만, 상업용으로는 유료이기 때문에 적용해드릴 수 없어
직접 설치 및 설정을 하셔야합니다.

 

Infinite Scroll

New! JavaScript and jQuery plugin to automatically add next pages.

infinite-scroll.com

이 페이지에서 CDN 주소를 둘 중 하나만 복사합니다.
min이 붙은 주소가 파일 용량이 조금 더 작습니다.

스킨 편집 > html편집 > 스크롤을 맨 아래로 내려서

</s_t3> 위에 붙여넣거나, <script src="./images/script.js"> 부근에 붙여 넣습니다.
그 후 붙여넣은 CDN 스크립트 바로 아래 밑에 소스를 복사 후 붙여넣기 합니다.

<script>
 $('.myoskin.inner').infiniteScroll({
     path: '.next',
     append: '.myoskin .item',
     hideNav: '.pagination',
     history: false,
 });
</script>

 

- 제작한지 오래 된 스킨이나 일부 스킨은 구조에 따라 적용이 되지 않을 수 있습니다.
(위에 적혀진 클래스명과 다른 오래된 스킨, 구조가 다른 경우는 #container에 position:fixed 값이 있는 주로 부분 스크롤 형으로 보여집니다)

 

 

imagesLoaded

imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 4,500 Demo Add images Reset demo Edit this demo or vanilla JS demo on CodePen. Just to keep things inte

imagesloaded.desandro.com

더불어 이 소스와 함께 적용하면 더 예쁘게 사용할 수 있습니다 (만 저는 아직 이 소스에 대해 잘 모릅니다 ㅠㅠ)

728x90
반응형