티스토리 뷰
clientHeight, offsetHeight, scrollHeight의 차이
문제상황
DOM을 이용해서 JS 이벤트를 조작하고 있었는데 문득 clientHeight(width), offsetHeight(width), scrollHeight(width)의 차이가 궁금해졌다.
위의 스택오버플로가 너무나 간결하게 정리해줬다.
client-: 눈에 보이는 content + padding의 크기값offset-: 눈에 보이는 content + padding + border + scrollbar의 크기값scroll-: 눈에 보이지 않는 영역까지 포함한 전체 content + padding의 크기값
따라서 아래 구문이 true면 어떤 요소를 끝까지 스크롤한 것이다. (출처)
// true면
element.scrollHeight - element.scrollTop === element.clientHeight'Programming > Javascript' 카테고리의 다른 글
| String.prototype.padStart()와 String.prototype.padEnd() (0) | 2021.01.07 |
|---|---|
| hasOwnProperty등 builtin 메소드 안전하게 사용하기 (0) | 2020.12.18 |
| 자바스크립트로 페이지 새로고침하기 (0) | 2020.12.09 |
| parameter와 argument의 차이 (0) | 2020.05.31 |
| 스크립트 언어와 컴파일 언어의 차이 (0) | 2020.05.31 |
댓글