clientHeight, offsetHeight, scrollHeight의 차이

clientHeight, offsetHeight, scrollHeight의 차이

참고

문제상황

DOM을 이용해서 JS 이벤트를 조작하고 있었는데 문득 clientHeight(width), offsetHeight(width), scrollHeight(width)의 차이가 궁금해졌다.

위의 스택오버플로가 너무나 간결하게 정리해줬다.

1. client- : 눈에 보이는 content + padding의 크기값
2. offset- : 눈에 보이는 content + padding + border + scrollbar의 크기값
3. scroll- : 눈에 보이지 않는 영역까지 포함한 전체 content + padding의 크기값

따라서 아래 구문이 true면 어떤 요소를 끝까지 스크롤한 것이다. (출처)

// true면
element.scrollHeight - element.scrollTop === element.clientHeight