jQuery + Ajax로 인피니티 스크롤, 무한 스크롤을 구현해보자. -1-

게시판 리스트를 pagination 형식에서 무한 스크롤 형식으로 변경해 달라는 요청이 있었다.
계속 테스트를 하면서... 나도 사실 많은 게시물을 페이지를 넘나들며 보기엔 너무 귀찮았다.
비록 장점과 단점이 명확한 방식이지만, 또 생각없이 쭉쭉 보기에는 이만한게 없지.

이왕 작업할거 나중에 작업하기도 편하게 블로그에 적어놓고 틈틈히 고도화? 해야겠다.

인피니티 스크롤 즉 무한 스크롤 이라고도 불리는 형식은 여러곳에서 볼 수 있다.
대표적으로 인스타그램 이라던지 트위터 라던지...
리스트에서 페이지 번호가 달려있지 않고 쭉쭉 드래그 하여 새로운 게시물 들이 막 불러와지는 그 기능... 맞다.

인피니티 스크롤 예...인스타그램

시작하기 앞서 500개의 임의 데이터를 집어넣고 기존의 방식대로 pagination 형식으로 리스트를 뿌려보았다.

jQuery + Ajax로 인피티니 스크롤, 무한 스크롤을 구현해보자. -1- 임의 데이터리스트

잘 나온다. 이제 스크롤이 생겨야 하니 한 페이지에 뿌려주는 데이터 양을 늘리고...

이제부터 인피니티 스크롤을 구현해보자!!!


일단 인피니티 스크롤(이하 무한 스크롤) 의 작동 방식은 별거(???) 없다
해당 화면에서 일어나는 스크롤을 감지하여 페이지의 하단에 닿거나 하단 근처에 왔을 경우
다음 페이지를 불러 아래에 붙여주면 된다.

말은 쉽다.

일단 작동방식에 따라 기능을 구현하려면 먼저 스크롤 이벤트 부터 바인딩 해야한다.
오늘은 시간 관계상 스크롤 이벤트만 짜두고, 내일 ajax쪽을 작업해서 포스팅 해야징

//현재 스크롤 위치 저장
let lastScroll = 0;

$(document).scroll(function(e){
    //현재 높이 저장
    var currentScroll = $(this).scrollTop();
    //전체 문서의 높이
    var documentHeight = $(document).height();

    //(현재 화면상단 + 현재 화면 높이)
    var nowHeight = $(this).scrollTop() + $(window).height();


    //스크롤이 아래로 내려갔을때만 해당 이벤트 진행.
    if(currentScroll > lastScroll){

        //nowHeight을 통해 현재 화면의 끝이 어디까지 내려왔는지 파악가능 
        //즉 전체 문서의 높이에 일정량 근접했을때 글 더 불러오기)
        if(documentHeight < (nowHeight + (documentHeight*0.1))){
            console.log("이제 여기서 데이터를 더 불러와 주면 된다.");
        }
    }

    //현재위치 최신화
    lastScroll = currentScroll;

});

현재 스크롤 위치를 저장해서 진행된 스크롤이 마지막 스크롤값보다 커야지만 작동한다.
즉 아래로 내려갈 경우에만 작동한다.

잔뜩 <br /> 태그로 스크롤을 만든 뒤 위 스크립트를 넣고 테스트를 해본다면, 화면의 끝에 닿기 전에 console.log가 실행되는걸 볼 수 있다.