[Javascript] scrollHeight 와 clientHeight 에 대해 알아보자

코드를 짜던 도중 textarea가  text 높이에 따라 자동으로 높이 조절을 구현 하고 싶었다.  

textAreaElement.style.height = textAreaElement.scrollHeight + 'px';

 

이렇게 적어주면 된다는 많은 블로그들의 말에 따라 했는데 이상하게 낮은 버전의 web에서는 이게 안먹히는것이다...... 

그래서 원인을 찾던 중 알게 된 scrollHeight 와 clientHeight를 간단하게 작성해보려고 한다. 

 

scrollHeight

• 정의: 요소의 전체 콘텐츠 높이로, 스크롤 여부와 상관없이 요소 내의 모든 콘텐츠 높이를 포함.
• 특징: 요소의 내부 콘텐츠가 현재 뷰포트에 보이지 않더라도 해당 영역까지의 전체 높이를 반환.
• 예시: 텍스트가 많아 세로로 스크롤이 필요한 경우, scrollHeight는 요소의 눈에 보이는 영역뿐만 아니라 스크롤해서 볼 수 있는 모든 콘텐츠의 높이를 포함. 

clientHeight

• 정의: 요소의 스크롤되지 않는 영역의 높이를 나타냄. 
• 특징: 패딩(padding)은 포함되지만, 요소의 스크롤바나 테두리(border)는 포함되지 않음.
• 예시: 사용자가 보고 있는 높이만을 반환하는 것이 특징.

 

두 속성의 차이

 

• scrollHeight는 전체 콘텐츠의 높이를 반환하고, clientHeight는 보이는 영역의 높이만 반환함. 
• 스크롤이 없는 경우: scrollHeight와 clientHeight는 같을 수 있다.
• 스크롤이 있는 경우: scrollHeight가 clientHeight보다 커진다. scrollHeight - clientHeight는 스크롤 가능한 영역의 높이를 의미한다.