onTop 관련 질문

Question

안녕하세요 선생님.

스크립트쪽이 어렵고 이해가 어려운 학생입니다

질문을 많이 올려 자주 볼수도 있을거 같습니다 ^^;;

다름이 아니라

onTop = $(document).height() - $(window).height() - $('.footer').height(); //스크롤이 문서하단에 도착했는지 계산합니다.

if(winTop >= onTop){ //하단에 도착했을경우

여기서 onTop 이 어떻게 문서하단에 도착한것을 뜻하는 식인지 이해가 잘 안가 여쭤봅니다.

제가 식을 이해한 바로는 저 계산의 결과는 푸터를 제외한 내용영역인거같고, 스크롤하단 여백이 푸터 높이만큼 남았을때 리스트가 올라오는거같습니다.

그런데 식이 왜 푸터를 제외한 내용영역부분이 문서하단에 도착했는지를 뜻하는지와 푸터의 높이만큼 스크롤 하단 영역이 남았을때 로드가 되는지 원리가 궁금합니다 ㅠㅠ

console.log로 winTop과 onTop 의 값의 변화를 보았을때 대략적으로 이해는 갔지만 아직도 헷갈려서 질문 드립니다.

감사합니다.

Answer

도움이 되었다니 기쁘네요 :D 또 다른 궁금증이 생길땐 언제든 문의주세요 :)

Answer

선생님 그림까지 그려서 친절한 설명 정말 감사드립니다.

앞부분의 친절하신 설명과 스트롤탑의 최대값이 어떻게 측정되는지 알면서 헷갈렸던 부분 궁금증이 해결되었습니다 ! ㅎㅎ

정말 감사합니다 ^^ 힘내서 수업 완강하겠습니다.

Answer

안녕하세요 지니님 :D

무한스크롤에 관련해서 궁금증이 생기셨군요

해당 수식은 무한 스크롤을 만들기 위해 제가 직접 만든 수식입니다.

아주 간단한 수식을 통해 구현 했는데요

수식을 잘못 만들 경우 한없이 어려워질 수 있어서 정확하게 이해하는 것도 중요하다고 생각되네요 :)

질문 주신 내용을 그림을 통해 확인해 보겠습니다.

다음 그림에서 문서의 총 높이는 1445px입니다 즉 $(document).height()가 되는거구요

그다음 $(window).height() 화면의 높이가 되는거구요 1080px입니다.

그다음 화면에 추가되어 있는 엘리먼트 푸터의 높이를 구합니다. 200px이 되죠?

즉 1445-1080-200 = 165px됩니다.

문서의 높이에서 스크린의 높이와 푸터의 높이를 빼고 나면 문서의 높이는 165px이 남는 거겠죠?

그리고 스크롤을 진행할때 스크롤탑값이 이동할수 있는 최대값은 문서의 높이인 165(onTop) + 200(푸터의 높이) = 365px이 됩니다.

그렇기 때문에 스크롤탑값이 푸터의 높이를 뺀 값인 165px(onTop)보다 커질경우 문서의 맨 끝에 도착했다고 판단하게되고 새로운 요소들을 호출해서 무한 스크롤이 발생하도록 만드는 겁니다 :)

만약 푸터의 높이를 빼지 않았다면 푸터의 끝 위치에 도착 했을때 무한 스크롤을 호출하겠죠?

이해가 안간다면

onTop = $(document).height() - $(window).height() - $('.footer').height();

다음 수식을

onTop = $(document).height() - $(window).height() ;

다음과 같이 고치고 테스트 해보세요

푸터의 높이를 빼지 않는다면

푸터요소의 끝에 도달 했을때 무한 스크롤이 발생할 겁니다 :D

정리 하자면 해당 수식을 통해서 문서의 끝에 도달 했는지 구하는거랍니다. 푸터를 빼주는 이유는 푸터를 제외한 문서의 끝 위치를 알기 위함이죠!

그럼 또 다른 궁금증이 생길때 문의주시고 화이팅하세요 :)