scrollTop, scrollHeight

들어가며😃

---

교육시간에 간단한 채팅창을 만들어보았는데 메시지를 담는 div가 넘치면 최신 메시지가 아닌 가장 오래된 최 상단의 메시지가 계속 보이는 걸 발견했다.

우리가 아는 모든 채팅창들은 메시지가 위에서 부터 아래로 쌓이고, 가장 최신 메시지가 있는 맨 아래 화면을 보여주기에 원리가 궁금했고 UX를 반영하고 싶었다. 찾아보니 스크롤 속성을 조정하면 됐는데 오늘은 새로 알게된 높이 관련 속성에 대해 정리하려 한다.

scrollTop

---

scrollTop은 DOM 요소의 수직 스크롤 위치를 나타내는 속성이다. 수직 스크롤바를 가진 요소에서 스크롤바의 위치를 조작하고 제어할 수 있도록 도와준다. 아래의 예제를 참고해보자.

우선 3개의 블럭을 생성했는데 블럭들을 container로 감싸주었다. (각각의 높이는 주석 참고) container는 일부러 안의 요소가 넘치도록 300px로 지정해주었고 overflow-y: scroll 속성을 추가해주었다.

<div class="container">
  {/* height: 300px */}
  <div id="first">first</div> {/* height: 100px */}
  <div id="second">second</div> {/* height: 200px */}
  <div id="third">third</div> {/* height: 100px */}
</div>

그리고 스크롤 이벤트가 발생할 때 마다 스크롤 정보를 가져와보자

    <script>
      const container = document.querySelector(".container");

      {/* 실시간 scrollTop 로그 찍기 */}
         function handleScroll() {
           const scrollTop = container.scrollTop;
           console.log("Scroll position:", scrollTop);
         }

         container.addEventListener("scroll", handleScroll);
    </script>

위의 이미지에서 보는것처럼 scroll 이벤트 발생시에 scrollTop 로그가 계속 찍히고 있는걸 볼 수 있다.

그리고 scrollTop 설정을 제어해보자.

<script>
  const container = document.querySelector(".container"); container.scrollTop =
  100;
</script>

스크롤이 생성된 영역에서 scrollTop = n을 정해주면 화면이 렌더링될 때 그 값만큼 스크롤 값이 지정된다. 나같은 경우는 3개의 박스중 제일 상단의 박스 높이가 “100x” 이였기 때문에 scrollTop = 100 으로 인해 첫번째 블럭이 완전히 숨겨지게 되었다.

엇!! 그렇다면 scroll을 게속 아래로 유지한다면 채팅방에서 계속 최신 채팅을 볼 수 있는건가???🤷🏻‍♀️
허허 바로 그것이다.😎 이론상 scrollTop = 내가 원하는 DOM의 높이 면 되야하는데,,, 그렇지만 호락호락하지 않다. 채팅이 주고받아지면 그 채팅방의 높이 속성은 계속 변할 것이다. 그렇기 때문에 지속적으로 변하는 높이 속성을 알아야한다.

scrollHeight

---

scrollHeight 는 DOM 요소의 실제 높이값이다. 화면에 보여지는 영역 외에 전체 값을 뜻한다. 여기서 container 의 보여지는 높이는 300px 이지만 실제 내부에 3개의 블럭이 속해있다. 그 3개의 높이 값을 다 더한게 400px 이고 이것이 scrollHeight 값이 된다.

그러면 화면에 보여지는 높이 값은 무엇일까?

clientHeight

---

clientHeight 는 현재 보여지는 값이다. 위에서 언급했듯 container의 높이 속성으로 지정해주었던 300px 이 client 값이 되는 것이다. 실제로 로그를 찍어보면 아래와 같다.

아래의 이미지로 정리해봤다.

채팅방 아래로 유지시키기

---

그렇다면 채팅창은 채팅을 주고 받으며 실제 DOM 의 가장 아래에 최신 채팅이 배치되기 때문에 scrollHeight 정보를 가져오는 것이 적절하다.

chatDiv.scrollTop = chatDiv.scrollHeight;

사실 결론은 이게 끝이다. 매우 단순하다.🙃

짠! 위의 속성을 적용시켜주면 이미지와 같이 채팅을 계속 추가해도 화면이 계속 유지되는 것을 볼 수 있다.

---

사실 수업을 따라가면서 화면 구현만 하고 됐다! 하고 넘어가려했는데, 옆에 조장님이 ‘아, 이거 채팅 올라갈때마다 화면 내려주고 싶은데’ 에서 문제를 깨닫고 스크롤 속성에 대한 공부가 시작됐다. 사실 조금만 인터넷에 찾아봐도 바로 알 수 있어 적용은 빠르게 했다만,,,
조장님의 말을 들었을때 사실 한대 맞은 것 같았다. 왜 난 그런 생각을 못했지? 사실 생각못한게 어쩌면 당연할 수도,, 채팅창이 내려갈때까지 채팅을 치지 않았었다.. 화면에 채팅 한두개만 넣고 됐다하고 치웠으니 이런 문제도 마주하지 못했던것이다. 매우 매우 반성🥲
하지만 이번 경험을 통해 또하나 배웠으니,,, 문제를 만나야 문제가 뭔지 안다는것,, 구현했다고 끝내지말고 깊이 파고들어보자. 오늘의 포스팅은 이렇게 마무릐😎