[JS] JQuery 를 이용한 반대반향 무한스크롤 (Reversed Infinite Scroll) 예제

Animation

See the Pen Reversed Infinite Loading (Like Chat) using JQuery by velopert (@velopert) on CodePen.

정방향 무한스크롤링을 구현해봤다면, 반대방향 무한스크롤링은 더! 쉽다.

이번 예제에선 로딩 대기시간을 주고, 로딩 효과를 주었다.

var page = 2;

var isLoading = false;

function loadNewPage() {
    var temp = $(document).height();
    page++;
    $(".container").prepend('<div class="big-box"><h1>Page ' + page + '</h1></div>');
    $(document).scrollTop($(document).height()-temp);
    isLoading = false;
}

$(document).scroll(function() {
  if($(document).scrollTop() < 60 && !isLoading) {
    isLoading = true;
    setTimeout(loadNewPage, 1200);
  }
  
});


$(document).scrollTop($(document).height());

코드설명

LINE 2 로딩이 중첩되지 않도록 boolean 값을 추가한다

LINE 5-11 로딩을 1.2초 후 하기위하여 로딩 작업을 함수에 담았다.

LINE 6, 9 이게 어찌보면 이 코드의 핵심이다. 페이지의 높이를 담아뒀다가, 로딩이 된 다음의 페이지 높이에서 이전 값을 절감하여 그 값을 현재 스크롤바 위치로 설정한다, 따라서 새 데이터가 로딩되도 보고있는 화면은 같게 유지 할 수 있다.

LINE 14 스크롤바의 위치가 60 미만이면 로딩을 시작한다. 여기서 60은 로딩개체의 크기이다.

LINE 22 페이지 로딩 시 스크롤바를 최하단으로 이동한다