scroll 이벤트를 위해 미리 알아둘 것들

window.pageYOffset (혹은 X도 있음)	스크롤을 얼마나 움직였는가. (스크롤 이동 거리)
타겟.offsetTop (스크롤 움직여도 값 변하지 않음)	타겟이 document 상단에서 얼마나 떨어졌는가 스크롤에 영향받지 않음.
타겟.getBoundingClientRect()	타겟의 크기와 위치 값을 가지고 있어서 타겟이 브라우저 창의 top,left,right,bottom에서 얼마나 떨어졌는 지의 값을 알 수 있다. 스크롤 변화할 때마다 값이 바뀌고, 스크롤의 속도에 영향 받는다.
window.innerHeight	브라우저 내부 높이 (가로 스크롤바 포함)
window.outerHeight	브라우저 창 자체의 전체 높이
window.innerWidth	브라우저 내부 너비(세로 스크롤바 포함)
window.outerWidth	브라우저 창 전체 너비
document.body.offsetWidth	가로 스크롤바 제외한 너비

 

 

스크롤 있는 경우 document.body.offsetWidth < window.innerWidth < window.outerWidth

스크롤 없을 경우 document.body.offsetWidth == window.innerWidth