[JS] JQuery 를 사용한 무한 스크롤 (Infinite Scroll) 예제


f

Link: CodePen

생각보다 많이 간단하다

var page = 1;

$(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      console.log(++page);
      $("#enters").append("<h1>Page " + page + "</h1><BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~<BR/>So<BR/>MANY<BR/>BRS<BR/>YEAHHH~");
      
    }
});

이런식으로 윈도우의 스크롤을 감지해서 맨 아래에 닿는다면 html 을 append 하는 방식이다.

만약 JQuery 를 쓰지 않고 Pure JavaScript 를 사용하는 경우

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

위와 같이 스크롤을 감지하면 된다.

 


추가:

 

가장 처음, 표시한 내용에 비하여 화면이 커서 스크롤바가 생기지 않았을 수도있다.

그런 경우엔 스크롤바가있는지 없는지 감지해서 내용을 추가하도록한다.

 

    if ($("body").height() < $(window).height()) {
        alert("There isn't a vertical scroll bar");
    }

 

  • 이용준

    만약 페이스북처럼 뉴스피드에서 DB에 저장된 내용들을 무한스크롤 하려고하면 if문 안에 ajax로 데이터를 불러들이는게 좋을까요? 아님 db를 쓸때는 다른 좋은 방법이 있는지 궁금하네요.

  • 홍길동

    그런데 클릭해서 다음페이지 갔다가.. 뒤돌아가면… 다시 1페이지부터 시작되는 문제가 있는데..
    이부분은 해결을 혹시 하셨나요??