자바스크립트 스크롤의 현재 위치를 계산하기 위한
내장함수는 크게 3가지가 있다 ( 이 밖에도 많지만, 기본적인 것 3개)
1. scroll Y
scrollY 에 대한 공식적인 설명은 아직도 없는 듯 하다.
- window의 인터페이스인 scrollY 속성은, 문서가 수직으로 몇 픽셀 만큼 스크롤 되었는지를 반환한다.
- 반환되는 값은 최신 브라우저에서 subpixel 정밀도 이므로, 반드시 정수값이 반환되는 것은 아니다.
2. window.innerHeight
innerHeight 속성은 윈도우 content area의 높이를 반환한다.
지금 보고있는 화면의 높이라고 생각하면 된다.
window.innerHeight // 브라우저 윈도우 두께를 제외한 실질적 세로 길이
3. document.body.scrollHeight
스크롤 시키지 않았을 때의 전체높이를 구한다.
scrollheight 는 w3c 의 표준이 아니며, 브라우저별로 다르게 표현된다.
같은 효과를 내더라도, 경우에 따라서 0~40px 정도의 차이가 있다.
* 현재 스크롤 길이를 퍼센테이지로 나타내는 내장함수
var scrollDepth
= ((window.scrollY + window.innerHeight)/document.body.scrollHeight) * 100;