티스토리 블로그 목록 더보기 무한스크롤 기능 구현 방법

무한스크롤 기능

사용자의 스크롤이 페이지 하단에 도달했을 때 다음 페이지 목록을 추가하는 것입니다.

무한스크롤 장점

• 일반 페이징보다 더 편한 사용자 경험을 제공합니다.

무한스크롤 단점

• footer에 도달하기 어렵습니다.
• 사용자가 원치 않는 페이징이 발생할 수 있습니다.
• 이미지 등 보여줘야 하는 리소스가 많은 경우, 페이지가 점점 느려질 수 있습니다.

---

티스토리 블로그 무한스크롤 구현

Javascript 무한스크롤 페이징 예시

// 중복 호출 방지
var noMore = true;

$(window).scroll(function() {
    if(noMore) {
        // 페이지 하단에 도달하였을 경우
        if(parseInt($(window).scrollTop()+100) + $(window).height() >= $(document).height()) {
            noMore = false;
            setTimeout(function(){
            	// 목록 더보기 버튼 클릭 이벤트 발생. id는 script.js에서 부여합니다.
              $('#view-more').click();
              noMore = true;
            }, 250);
        }
    }
});

한 번의 스크롤에도 빠른 시간 안에 onscroll 이벤트가 여러 번 발생하기 때문에 setTimeout으로 딜레이 주고,
noMore 변수를 플래그로 사용해서 ‘목록 더보기’ 버튼 이벤트를 1번씩만 실행하게 했습니다.

모바일 호환 처리 설명

모바일에서는 상단바 및 하단바 등의 height가 있기 때문에 +100 정도 더하였습니다.

현재 스크롤 상단 높이 : $(window).scrollTop()
브라우저 창 높이 : $(window).height()
전체 문서 높이 : $(document).height()

PC 웹에서는 정수로 나오지만 모바일에서 호출하면 소수점 형태로 나와서 parseInt 해주었습니다.