🎒heecheolman

🚀 DOM Height

DOM Element

clientHeight

element.clientHeight

요소의 보여지는(viewable) 높이의 픽셀을 return padding 포함 border, scrollbar, margin 미포함

offsetHeight

element.offsetHeight

요소의 보여지는(viewable) 높이의 픽셀을 return padding, border, scrollbar 포함 margin 미포함

scrollHeight

element.scrollHeight

요소의 전체높이를 픽셀단위로 return padding 포함 border, scrollbar, margin 미포함

scrollTop

element.scrollTop

요소의 내용을 세로로 스크롤하는 픽셀 수 return 또는, 설정

DOM Window

innerHeight

window.innerHeight

window content 내부 영역의 height 값 return

// cross-browser solution
let h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

pageYOffset

window.pageYOffset

window 의 위쪽 모서리에서 세로로 스크롤된 픽셀을 return

// cross-browser solution
let h = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

scrollY

window.scrollY;

window.pageYOffset 의 별칭