[JavaScript] 스크롤 맨 아래점 도달 시 글 불러오기

* 스크롤에 대한 기초 지식

1. $(window).scrollTop()

2. $(window).height()

3. $(document).height() 

이 세 가지만 알면 스크롤이 맨아래 도달시에 조건을 핸들러로 사용하여 글을 불러오는 등의 동작을 할 수 있습니다.

1. $(window).scrollTop()

: 스크롤의 위치에 따라 변하는 값 (세로 좌표)

: 맨 위에서 0으로 시작하여 맨아래 도달시 스크롤 길이 max값을 가짐.

http://www.trandent.com/jsTest/22393920144658

위 사이트에서 한번 동작해보면 이해하기 수월합니다.

2. $(window).height()

: 보여지는 창의 높이길이

3. $(document).height() 

: jsp, html 등 문서의 높이 길이

: 보여지는 창의 높이 길이 보다 문서의 길이가 길다면 스크롤이 생깁니다.

 **구현 코드

    $(window).scroll(function() {
        
        
        var scrolltop = $(document).scrollTop();
        console.log(scrolltop);
        var height = $(document).height();
        console.log(height);
        var height_win = $(window).height();
        console.log(height_win);
        
        
     if (Math.round( $(window).scrollTop()) == $(document).height() - $(window).height()) {
        
        
        moreList();
        
    }  
    

 $(window).scroll(function() {

: 윈도우의 스크롤을 움직일때 function이 작동합니다.

 

 var scrolltop = $(document).scrollTop();

        console.log(scrolltop);

        var height = $(document).height();

        console.log(height);

        var height_win = $(window).height();

        console.log(height_win);

        

      

: 콘솔에 값을 찍어보면서 작업하면 동작 이해에 도움이 됩니다.

 if (Math.round( $(window).scrollTop()) == $(document).height() - $(window).height()) {

        

        

        moreList();

        

    }  

    

: Math.round() 메소드는 해당 숫자를 반올림 해주는 기능을 합니다.

   $(document).scrollTop() 값이 double형인데다가 약간의 오차가 생겨서 반올림을 해줬더니 잘 작동되었습니다.

: Math.round( $(window).scrollTop()) == $(document).height() - $(window).height() {

        

        

        moreList();

        

    }  

   (스크롤을 맨 밑으로 내렸을 때의 스크롤 길이 값)   == (문서의 길이) - (창의 길이)   조건을 만족할 때 글을 추가로 불러옵니다.

질문이 있으시면 댓글로 질문을

도움이 되셨다면 공감 버튼을..!