Scroll Properties
DOM 요소의 스크롤 관련 속성들이다. 무한 스크롤에서 하단 도달을 감지하거나, 스크롤 위치를 저장했다가 복원하는 기능 등에 활용된다.
핵심 속성 3가지
스크롤을 다룰 때 알아야 할 속성은 세 가지다. scrollHeight는 전체 콘텐츠의 높이, clientHeight는 화면에 보이는 높이, scrollTop은 현재 스크롤 위치를 나타낸다.
scrollHeight
요소의 전체 콘텐츠 높이다. 스크롤해야만 볼 수 있는 영역까지 모두 포함한 값이다. 콘텐츠가 많아서 스크롤이 필요한 경우 scrollHeight는 clientHeight보다 크다.
clientHeight
요소에서 실제로 화면에 보이는 높이다. padding은 포함하지만 border, scrollbar, margin은 제외된다. 뷰포트의 높이라고 생각하면 된다.
scrollTop
요소가 수직으로 스크롤된 픽셀 수다. 맨 위에서 얼마나 스크롤했는지를 나타낸다. 맨 위에 있으면 0이고, 맨 아래까지 스크롤하면 scrollHeight - clientHeight 값이 된다.
사용 예시
스크롤 위치 확인
세 가지 속성을 한 번에 가져오는 코드다.
const element = document.documentElement;
const scrollTop = element.scrollTop;
const scrollHeight = element.scrollHeight;
const clientHeight = element.clientHeight;
document.documentElement는 <html> 요소를 가리킨다. 페이지 전체의 스크롤을 다룰 때는 이 요소를 사용한다. 만약 특정 스크롤 컨테이너 안에서 스크롤을 다뤄야 한다면 해당 요소를 직접 선택하면 된다.
하단 도달 감지
무한 스크롤을 구현할 때 가장 많이 쓰는 패턴이다. 현재 스크롤 위치에 보이는 높이를 더한 값이 전체 높이에 도달했는지 확인하면 된다.
const isBottom = scrollTop + clientHeight >= scrollHeight - 100;
여기서 -100은 여유값이다. 완전히 맨 아래까지 스크롤하지 않아도 100px 정도 남았을 때 미리 감지해서 다음 콘텐츠를 로드하면 사용자 입장에서 더 부드럽게 느껴진다.
스크롤 위치 설정
scrollTop은 읽기만 할 수 있는 게 아니라 값을 할당해서 스크롤 위치를 직접 제어할 수도 있다.
element.scrollTop = 0; // 맨 위로
element.scrollTop = element.scrollHeight; // 맨 아래로
"맨 위로 가기" 버튼을 구현하거나, 채팅 앱에서 새 메시지가 오면 자동으로 맨 아래로 스크롤하는 기능에 활용할 수 있다.
document.documentElement vs document.body
페이지 전체 스크롤을 다룰 때 주의할 점이 있다. document.body.scrollTop은 일부 브라우저에서 항상 0을 반환한다. 브라우저마다 동작이 다르기 때문에 documentElement를 사용하는 게 안전하다.
// 권장
const scrollTop = document.documentElement.scrollTop;
// 또는
const scrollY = window.scrollY;
window.scrollY도 현재 스크롤 위치를 반환하지만 읽기 전용이다. 스크롤 위치를 변경하려면 scrollTop에 값을 할당하거나 window.scrollTo()를 사용해야 한다.
관련 문서
- IntersectionObserver - 스크롤 이벤트 없이 요소 가시성 감지