[JS] scroll 위치

Parallax Scroll 효과 관련 공부하던 중 이러한 코드를 발견했다

let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;

이 다양한 scrollTop .... 이제는 정리할 때가 왔다!

window.scrollY / scrollX

✔️ Window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다. 수평 스크롤은 scrollX 속성을 사용하여 가져올 수 있습니다. ; MDN

즉, scrollY 는 문서의 꼭대기인 맨 위에서부터 얼마나 스크롤이 되었는지 그 값을 반환한다!
하지만❗ 항상 정숫값을 반환하는 것은 아니므로 필요하다면 Math.round()를 통해 반올림을 해준다

pageYOffset

찾아보던 중 충격적인 사실!!! pageYOffset은 scrollY의 다른 이름이라고 한다...!
그러므로 아래가 성립한다.

window.pageYOffset === window.scrollY; // 항상 true

❗그렇다면 왜 둘을 같이 적어줬는가?
✔️브라우저간 호환성을 위해서는 window.scrollY 대신 window.pageYOffset을 사용하세요. 이에 더해, Internet Explorer 9 미만의 구형 환경에서는 두 속성 모두 지원하지 않으므로 또 다른 비표준 속성을 사용해야 합니다. ; MDN

MDN에서는 브라우저호환성의 문제로 모두 다 적으라고 했지만 IE 에서는 또 지원하지 않는다고 한다. 그래서 추가된게 마지막 속성인게 아닌가 싶다

scrollTop

✔️이 Element.scrollTop속성은 요소의 콘텐츠가 세로로 스크롤되는 픽셀 수를 가져오거나 설정합니다. ; MDN
window와 붙여서 사용하는 scrollY, pageYOffset과는 달리 scrollTop은 다른 요소에서도 사용할 수 있다.
우리는 window나 body와 같은, 즉 뷰포트 전체를 기준으로 한 스크롤의 위치를 구하고 싶으므로

... document.documentElement.scrollTop || document.body.scrollTop;

위와 같이 documentElement와 body의 scrollTop을 구해준다.
(documentElement는 the root element of document를 반환)