jQuery div태그 동적 로딩 위한 스크롤 마지막 체크하기

동적 로딩을 할려면 스크롤의 하단 부분을 체크할 수 있어야 하기에 ! 아래부분 인식부터 해보자

사실 구글에 검색하면 바로 나오는 간단한 (?) 조건문이지만

한번도 제대로된 설명을 보지 못했고 정확하지 않은 부분을 발견해서 포스팅하게 되었다. 😖

HTML 부분을 참고하고자 첨부한 사진이다.

크게 볼 건 없지만 혹시나 자바스크립트 삐약이인 나같은 사람들을 위해.. 햇갈리지 말라고 올려본다! 👍

( 화질이 왜이렇게 안좋지..? )

    /** list부분을 스크롤시 발생하는 함수 **/
    $("#list").scroll(function(){    
        if ($(this)[0].scrollHeight - Math.round($(this).scrollTop()) == $(this).outerHeight()){
            alert('end');
        }         
    });

바로 들어가서! 제이쿼리 코드 부분이다. 완전 간단해 보이지만 초보인 나에겐 간단하지 않았다.

우선 $("#list").scroll(function(){}); 이 주석으로도 적어놨듯이 스크롤할때 발생되는 함수다 !

HTML을 보면 알겠지만 나는 창 전체가 아니라 일정 div태그 부분이여서 #list에 함수를 설정했다.

그리고 핵심인 조건문 ! ( 짱어려워.. )

API를 하나 하나 검색했다...^^

우선 .. 하나 모르는 부분이.. $(this)[0] 부분이다. "#list"아이디를 가진 첫번째 태그라는 말인데

list 아이디가 하나 밖에 없어서 [0]을 지웠는데 안된다.. 이부분은 잘 모르겠다.. 😨

쨌뜬...😅 scrollHeight 는 스크롤 전체의 높이를 말한다.

보여지는 스크롤 높이가 아니라 실제 스크롤 높이를 말하며 padding까지 포함한 높이다.

단, margin 값은 포함하지 않으며, 반환값은 반올림된 정수형이다.

두번째로 scrollTop은 Return the vertical scrollbar position for a <div> element

즉, div태그의 현재 수직 스크롤의 위치를 나타낸다.

 ( 가장 윗 부분에 위치하고 있다면 0이 나오겠죠 ! :D )

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_scrolltop_get

보는게 가장 이해가 빠르니 참고 해보시길!

참고 사이트에 들어가보면 알겠지만 scrollHeight와 다르게 실수값이 나올 것이다.

( 마우스로 정교하게 스크롤바를 움직이면 말이다. )

세번째로 outerHeight는 스크롤 박스, 즉 보여지는 div태그의 높이이다.

scrollHeight 는 실제 보여지지 않는 스크롤 영역의 높이까지 나타낸 것이고 outerHeight는 div태그의 높이다.

영어 그대로 outer 바깥에 보여지는 높이!

기본적 padding과 border을 포함한 높이로 만약 margin의 높이도 포함하고 싶다면

API에 나와 있듯이 true의 매개변수를 넣어주면 된다.

.

.

.

# div 스크롤 체크가 제대로 안되는 현상 #

아마 구글에 찾아보면 대부분 스크롤의 끝은 찾는 코드들이 나와는 조금 다르게 Math.round 함수가 빠져있을 것이다.

내가 이 Math.round를 왜 해주었나!

( Math.round : 반올림 해주는 함수 )

처음 구글의 코드를 가져와 실행했을 때 나는 이상한 현상이 하나 생겼었다.

전체화면일때 스크롤의 마지막이 확인이 안됐다.

창을 조금 줄이면 다시 alert창이 떴고, 창을 또 다시 조금 줄이면 alert창이 안떴다.

왜?

왜 어떤 경우에는 스크롤의 마지막이 체크되면서 어떤 경우는 안되지?

높이를 고정으로 주었기 때문에 분명 높이가 달라지지 않는데.. 이상했다.

위에 글을 쓰면서 내가 굵은 글씨로 강조한 것들중 반환값이 있었을 것이다. ( 이제 눈치 채셨을지도..ㅎㅎ )

scrollHeight 와 scrollTop 의 반환값이 다르다 보니 정확하지 않아 발생한다고 생각이 들었고

따라서 scrollTop의 값도 높이와 마찬가지로 반올림을 해주었더니 해결되었다 !

막상 설명을 하자니 구구절절 늘어놓기만 한 것 같다. 😅

간단해 보이지만 나는 항상 어렵다..ㅋㅋ 그래도 이렇게 오류를 직접 발견하고 생각해서 고치니 뿌듯한 것 같다 !

같은 현상으로 고민하는 사람들에게 조금이나마 도움이 되었으면 좋겠다.