js. 문서의 맨 끝에 스크롤 도달 시 이벤트 실행

* 스크롤에 대한 기초 지식

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() {
   // 스크롤 이벤트 함수. 윈도우의 스크롤을 움직일 때 function 실행
        
        
        var scrolltop = $(document).scrollTop();
        console.log(scrolltop);
        var height = $(document).height();
        console.log(height);
        var height_win = $(window).height();
        console.log(height_win);
        
     
     // Math.round( )는 숫자 값을 반올림 해준다.
     if (Math.round( $(window).scrollTop()) == $(document).height() - $(window).height()) {
        	
            // addClass나, moreList(); 등
        
    }

 

출처: https://joo-dev.tistory.com/3