mouse scroll

javascript의 스크롤 이벤트 관련한 정보들을 작성해보자.

scrollY, clientHeight, scrollHeight

• window.scrollY : window의 scroll 시의 Y좌표 값. [Y >= 0] (number of pixels that the document is currently scrolled vertically)
• document.documentElement.clientHeight: document.documentElement값이 가지고 있는 Height. (viewable height of an element in pixels including padding but not the border)
• document.documentElement.scrollHeight: document.documentElement값이 스크롤을 하지 않을때 viewport에 모두 fit하게 담길수 있는 최소한의 Height (minimun height the element would require in order to fit all the content in the viewport without using a vertical scrollbar)
• element.scrollTop: elements가 수직적으로 스크롤한 픽셀의 수

window.scrollY + document.documentElement.clientHeight = document.documentElement.scrollHeight

참고링크

• scrollY, clientHeight 정의
• clientHeight, scrollHeight 정의