마우스 wheel 동작 이벤트 및 감지 - Part 2 : scrollTop, scrollHeight, clientHeight

마우스 wheel 동작 이벤트 및 감지 - scrollTop, scrollHeight, clientHeight

지난 포스팅에서 마우스 휠 이벤트를 감지하는 기본적인 방법들과 활용방식을 정리했습니다.
이벤트 리스너를 브라우저 창에 붙이는 경우와, 엘리먼트에 붙이는 경우에 사용하는 함수가 서로 다르다는 점에 꼭 유의가 필요하다고 정리를 했습니다.

 

마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이?

마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이?

마우스 휠 이벤트과 관련해서 정리할 내용이 조금 더 남아 있어서 이번 포스팅에서 정리해보려고 합니다.

 

스크롤한 양 vs 스크롤 높이 - scrollTop vs scrollHeight

지난 포스팅의 예제 코드에서 다음과 같은 부분이 있었습니다.

<script>
  const longText = document.querySelector("#longText");
  longText.addEventListener("scroll", function () {

    if (longText.scrollTop >= 190) {
      alert("약관 확인 완료!");
    }
  });
</script>

조건문에 190이라는 숫자가 직접 들어가 있는데요, 사실 이 부분은 div#longText 박스의 높이(height) 값은 아니고 임의로 넣은 값이었습니다.(scrollTop 최댓값이 199로 나오길래)

그러면 저 자리에 숫자 상수가 아닌 형태로 값을 넣을 수 있다면 좋겠죠? 그럴 때, scrollHeight를 활용할 수 있습니다.
scrollHeight는 엘리먼트가 갖고 있는 scroll의 전체 높이 값을 가지고 있습니다.

예제 코드를 조금 변경해서 살펴보겠습니다.

<script>
  const longText = document.querySelector("#longText");
  longText.addEventListener("scroll", function () {
    console.log("scrollTop: ", longText.scrollTop);
    console.log("scrollHeight: ", longText.scrollHeight);
  });
</script>

div박스 전체 스크롤 높이는 399px, 스크롤 할 수 있는 양은 최대 199px

div 박스 위에서 스크롤을 해보면, 콘솔창에 scrollTop와 scrollHeight값이 찍히게 됩니다.
그런데, scrollTop은 199에서 끝나고, scrollHeight는 399에서 끝나게 됨을 알 수 있습니다.

즉, 해당 div의 눈에 보이지 않는 부분까지의 전체 높이는 399px이고,
스크롤을 하지 않은 상태(scrollTop : 0)에서는 div의 height인 200px 만큼은 보이고 있으니까요.

즉, div 박스는 200px 보이다가 + scrollTop 199px로 더 볼 수 있는데 = 이는 scrollHeight 399와 같다.

div의 height + scrollTop = scrollHeight
200px + 199px = 399px

이해가 가시죠? 아직 혼란스럽다면, 아래 이미지를 참고해 주세요. stackoverflow에서 업어왔습니다.

scrollTop, scrollHeight 그리고 clientHeight의 관계 이해가 가장 중요합니다.

엘리먼트의 원래 높이 - clientHeight

이미지를 보니, clientHeight라는 새로운 단어가 보이는군요! 역시 콘솔에 찍어봅시다!

<script>
  const longText = document.querySelector("#longText");
  longText.addEventListener("scroll", function () {
    console.log("scrollTop: ", longText.scrollTop);
    console.log("scrollHeight: ", longText.scrollHeight);
    console.log("clientHeight: ", longText.clientHeight);
  });
</script>

longText 엘리먼트에 대해 CSS에서 지정해준 height 값이 곧 clientHeight 값입니다.

아항! clinetHeight는 div#longText의 CSS에서 준 height: 200px과 동일한 값입니다.
그렇다면, 위의 공식은 다시 한번 정리될 수 있겠습니다.

clientHeight + scrollTop = scrollHeight
200px + 199px = 399px

위 공식을 엘리먼트가 아니라 HTML 문서에 적용하려면?

그렇다면, 다시 element가 아니라 HTML 문서의 전체에 적용하려면 위 공식은 어떻게 사용하면 될까요?
즉, 아래 방향으로 스크롤이 있는 document의 전체높이와 현재 스트롤이 되는 양을 파악해서 문서 하단부까지 모두 열람했는지 아닌지는 어떻게 판단하면 좋을까요?

각각의 높이값은 document의 최상단 태그인 html 태그를 기준으로 잡으면 됩니다.

document.querySelector("html").clientHeight;
document.querySelector("html").scrollHeight;
document.querySelector("html").scrollTop;


// 참고로 아래 3개의 코드는 동일한 결과를 줍니다.
document.querySelector("html").scrollTop; 
document.documentElement.scrollTop;
window.scrollY;

그런데 한 가지 재미있는 것은, 이벤트 리스너는 window 객체에 붙여야 한다는 것입니다.
아래 코드들을 직접 실행해 보면서, 차이점을 확인해 두면 좋습니다.

//아래 코드는 이벤트 리스너 동작함
window.addEventListener("scroll", function () { 
  console.log(document.querySelector("html").clientHeight);
  console.log(document.querySelector("html").scrollHeight);
  console.log(document.querySelector("html").scrollTop);
});


//아래 코드는 이벤트 리스너 동작하지 않음. 곰곰히 생각해보세요^^
document.querySelector("html").addEventListener("scroll", function () {
  console.log(document.querySelector("html").clientHeight);
  console.log(document.querySelector("html").scrollHeight);
  console.log(document.querySelector("html").scrollTop);
});

 

마치며

scroll 이벤트에 대한 내용들은 click 이벤트들보다 복잡 미묘한 듯싶지만, 한 번만 정리를 꼭 해두세요. 절대 복잡하지 않습니다. 그리고 나면 웹 페이지들에 날개를 단 듯, scroll 이벤트를 통해 다양한 인터렉션 효과들에 대한 구현의 장으로 코딩 실력이 확장될 수 있을 것입니다.

이렇게 한번 정리를 하고 보니 이제 뭔가 좀 scroll 이벤트에 대해서 정리가 되는 느낌이 듭니다. 깜깜했던 머리가 갑자기 회전하기 시작했죠? 어렴풋이 감지되던 내용들이 정리가 되면서 머릿속에 안착될 때, 묘한 쾌감이 들 것입니다.

 

오늘도 즐거운 코딩 하세요.

즐거운 코딩생활, 즐코딩.
KINcoding.