웹브라우저에서 스크롤 정보를 가져오는 방법

이 글은 Window.scrollY - Web API | MDN의 내용을 참고하여 작성하였습니다.

스크롤 정보를 가져오는 방법

웹브라우저에서 현재 화면의 스크롤 정보를 알아야 할 경우가 있는데, 보통 아래의 방법을 많이 사용합니다.

// 화면의 Y축의 상단값
window.scrollY

// 화면의 Y축의 하단값
window.scrollY + window.innerHeight

브라우저 호환성

window.scrollY의 브라우저 호환성을 확인해보면 Internet Explorer(이하 IE)를 제외하고 모두 지원하며, 일부 모바일 환경에서 ?(알 수 없음)로 표시되어있습니다.

그리고 window.scrollY와 window.pageYOffset은 같은 속성이지만, 오래된 브라우저의 경우 window.scrollY 대신 window.pageYOffset만 지원할 수도 있으니 window.pageYOffset 사용을 권장하고 있습니다.

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

브라우저 호환성을 위해 수정한 코드

예전에 window.scrollY를 사용했다가 IE 브라우저에서 스크롤을 해도 이벤트가 실행되지 않는다는 버그리포트가 들어온적이 있는데, window.pageYOffset으로 수정하여 해결하였습니다. 평화를 위해 window.pageYOffset 속성을 사용합시다. 😊

// 화면의 Y축의 상단값
window.pageYOffset

// 화면의 Y축의 하단값
window.pageYOffset + window.innerHeight

IE9 미만을 위한 코드

IE9 미만에서는 두 속성 모두 지원하지 않으므로 또 다른 비표준 속성을 사용해야 합니다.
요즘은 IE10 미만을 가지고 있기도 힘들기 때문에 보통 지원 브라우저에서 제외되지만, 지원해야할 수도 있으니... 알아두는게 좋을 것 같습니다.

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

참고사이트

Window.scrollY - Web API | MDN
Can I use...