scrollHeight?

Q.
St2veK: scrollHeight 이 속성은 뭐지?

 

 

 

A.
GitHub Copilot: scrollHeight

 속성은 요소의 전체 높이를 나타냅니다. 이 높이는 요소의 내용이 스크롤되지 않은 상태에서의 전체 높이를 포함합니다. 즉, 요소의 실제 콘텐츠 높이를 나타내며, 스크롤 가능한 영역의 전체 높이를 의미합니다.

예를 들어, 다음과 같은 요소가 있다고 가정해봅시다:

<div id="content" style="height: 100px; overflow: auto;">
  <p>첫 번째 줄</p>
  <p>두 번째 줄</p>
  <p>세 번째 줄</p>
  <p>네 번째 줄</p>
  <p>다섯 번째 줄</p>
</div>

이 요소의 scrollHeight를 가져오면, 요소의 실제 콘텐츠 높이를 알 수 있습니다:

javascript
const content = document.getElementById('content');
console.log(content.scrollHeight); // 콘텐츠의 전체 높이를 출력

이 속성은 요소의 콘텐츠가 현재 보이는 영역을 초과할 때 유용합니다. 예를 들어, 스크롤바가 있는 요소의 전체 콘텐츠 높이를 알고 싶을 때 사용할 수 있습니다.