~ 단위는 모두 픽셀 ~
window.scrollY(pageYOffset)- 문서가 수직으로 얼마나 스크롤됐는가(즉, 현재 보이는 문서의 시작 높이)
window.innerHeight- 수평 스크롤 막대 높이를 포함한 창 내부 높이 (즉, 보이는 창 높이)
elem.clientHeight- 요소의 높이+패딩을 정수로 반환
- 오버플로우와 무관하게 엘리먼트의 높이를 측정
elem.offsetHeightclientHeight+ border + 스크롤 막대- 오버플로우와 무관하게 엘리먼트의 높이를 측정
- document.body나 document.documentElement 로 전체 창을 계산할 수 있다
elem.scrollHeight- 오버플로우로 인해 화면에 표시되지 않는 콘텐츠를 포함한 엘리먼트의 전체 높이를 측정한 것
- window.innerHeight vs clientHeight
- innerHeight는 요소 상관없이 브라우저 창 크기를 말한다. 사이즈를 조절할 때마다 달라짐
- clientHeight는 요소 크기
- documentElement vs body
documentElement: 최상위 html 요소, 지원하지 않는 브라우저도 있음body: body 요소
- pageYOffset vs scrollY
pageYOffset: IE를 호환함scrollY: IE 호환 x
- 엘리먼트의 크기를 따로 지정해주지 않으면 콘텐츠 크기(엘리먼트의 자식의 크기)가 엘리먼트 크기가 된다
- 따라서 엘리먼트의 크기를 지정해주지 않으면, 오버플로우(엘리먼트의 크기보다 콘텐츠 크기가 더 클 때 나타남)가 일어나지 않아서 scroll~과 offset~가 같게 된다
- border나 보여지는 스크롤 막대가 없으면 offset~과 client~가 같게된다
elem.offsetTop / elem.offsetLeft : elem 요소가 parent 요소의 위/왼쪽으로 얼마만큼 떨어졌는지 반환