JavaScript pageYOffset 속성 완벽 가이드 – 세로 스크롤 위치 확인 방법

웹 개발을 하다 보면 현재 문서가 창(window)의 왼쪽 상단 모서리를 기준으로 얼마나 스크롤되었는지 픽셀 단위로 확인해야 하는 경우가 있습니다. 이럴 때 pageXOffset과 pageYOffset 속성을 사용하면 됩니다.

pageYOffset 속성이란?

window.pageYOffset은 페이지가 세로 방향(수직)으로 스크롤된 픽셀 값을 반환하는 속성입니다. 반대로 가로 방향(수평)으로 스크롤된 픽셀 값이 필요하다면 window.pageXOffset을 사용하면 됩니다.

두 속성은 읽기 전용(read-only)이며, 별도의 매개변수 없이 호출만 하면 현재 스크롤 위치를 즉시 확인할 수 있습니다. 참고로 최신 브라우저에서는 동일한 기능을 하는 window.scrollY, window.scrollX 속성도 함께 지원됩니다.

사용 예제

아래 코드를 실행하면 버튼을 클릭할 때마다 페이지가 세로·가로 각각 200px씩 스크롤되고, 그 순간의 세로 스크롤 위치(pageYOffset 값)를 알림 창으로 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: green;
            height: 1500px;
            width: 1500px;
         }
      </style>
   </head>
   <body>
      <script>
         function scrollFunc() {
            window.scrollBy(200, 200);
            alert("세로 스크롤 위치: " + window.pageYOffset);
         }
      </script>
      <button onclick="scrollFunc()" style="position:fixed;">Scroll</button>
      <br><br><br>
      <div>
      </div>
   </body>
</html>

코드 설명

window.scrollBy(200, 200): 현재 위치에서 가로 200px, 세로 200px씩 상대적으로 스크롤을 이동시킵니다.
window.pageYOffset: 스크롤 이동 후의 세로 스크롤 위치를 픽셀 값으로 반환합니다.
position: fixed: 버튼이 화면에 고정되어 있어 스크롤해도 항상 같은 자리에서 클릭할 수 있습니다.

이처럼 pageYOffset 속성은 무한 스크롤 구현, 특정 위치 도달 시 요소 표시, 스크롤 진행률 계산 등 다양한 스크롤 기반 기능을 만들 때 유용하게 활용할 수 있습니다.