HTML DOM scrollHeight 속성 완벽 정리 – 요소의 전체 높이 구하기

HTML DOM의 scrollHeight 속성은 HTML 문서 내 특정 요소의 전체 높이를 픽셀(px) 단위로 반환합니다. 여기서 말하는 전체 높이란 화면에 실제로 보이는 영역뿐만 아니라 스크롤로 인해 가려진 부분까지 포함한 콘텐츠 + 패딩(padding)의 총합을 의미합니다.

구문(Syntax)

scrollHeight 속성의 기본 사용 구문은 다음과 같습니다.

element.scrollHeight

예제

아래 예제는 scrollHeight 속성을 활용하여 문단(p) 요소의 전체 높이와 너비를 확인하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: #ff7f5094;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
      height:80px;
      border:1px solid #fff;
      overflow:auto;
      width:250px;
      margin:20px auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
   }
</style>
</head>
<body>
<h1>DOM scrollHeight/scrollWidth Property Demo</h1>
<p>Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.
Hi!I'm a para element in HTML with some dummy text.</p>
<button onclick="getHW()" class="btn">Get paragraph height & width</button>
<div class="show"></div>
<script>
   function getHW() {
      var para = document.querySelector('p');
      document.querySelector(".show").innerHTML="<div>Para Height = "+para.scrollHeight+" px</div><div>Para Width = "+ para.scrollWidth+" px</div>";
   }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

HTML DOM scrollHeight 속성 완벽 정리 – 요소의 전체 높이 구하기

화면의 파란색 버튼을 클릭하면 해당 문단의 스크롤 높이(scrollHeight)와 스크롤 너비(scrollWidth)가 아래와 같이 표시됩니다.

HTML DOM scrollHeight 속성 완벽 정리 – 요소의 전체 높이 구하기

참고 사항

읽기 전용 속성: scrollHeight는 값을 조회만 할 수 있으며, 직접 설정할 수는 없습니다.
clientHeight와의 차이: 요소에 스크롤바가 없는 경우 scrollHeight는 clientHeight와 동일한 값을 반환합니다.
숨겨진 요소: display:none 상태인 요소의 경우 scrollHeight는 0을 반환합니다.
계산 범위: 패딩(padding)은 높이에 포함되지만, 테두리(border)와 마진(margin)은 계산에서 제외됩니다.