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

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");
    }

 

출처 : https://velopert.com/1890