웹 페이지에서 문서가 창(window)의 왼쪽 상단 모서리를 기준으로 얼마나 스크롤되었는지 픽셀 단위로 확인하고 싶다면 pageXOffset과 pageYOffset 속성을 사용하면 됩니다.
pageXOffset은 가로 방향(수평)으로 스크롤된 픽셀 값을 반환하고, pageYOffset은 세로 방향(수직)으로 스크롤된 픽셀 값을 반환합니다. 두 속성 모두 읽기 전용(read-only)이며, window 객체의 scrollX, scrollY 속성과 동일한 값을 제공합니다.
pageXOffset 속성의 주요 특징
- 문서가 수평 방향으로 스크롤된 픽셀 수를 정수로 반환합니다.
- 읽기 전용 속성이므로 직접 값을 설정할 수 없습니다.
window.pageXOffset또는 간단히pageXOffset으로 접근할 수 있습니다.- 모든 최신 브라우저에서 지원되며,
scrollX속성과 같은 값입니다.
예제 코드
아래 예제를 실행하면 JavaScript에서 pageXOffset 속성이 어떻게 동작하는지 확인할 수 있습니다. 버튼을 클릭하면 페이지가 가로·세로 각각 200픽셀씩 스크롤되고, 이후 현재 수평 스크롤 위치가 알림창에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
height: 1500px;
width: 1500px;
}
</style>
</head>
<body>
<script>
function scrollFunc() {
window.scrollBy(200, 200);
alert("Horizonal: " + window.pageXOffset);
}
</script>
<button onclick="scrollFunc()" style="position:fixed;">Scroll</button>
<br><br><br>
<div>
</div>
</body>
</html>
코드 설명
• div 요소: 1500×1500px 크기로 지정되어 충분한 스크롤 공간을 만듭니다.
• window.scrollBy(200, 200): 현재 위치에서 가로, 세로 방향으로 각각 200픽셀씩 스크롤합니다.
• window.pageXOffset: 스크롤 후의 수평 스크롤 위치(픽셀)를 가져와 alert()으로 화면에 표시합니다.
이처럼 pageXOffset 속성은 무한 스크롤 구현, 스크롤 위치 기반 애니메이션, 특정 지점 도달 시 UI 변경 등 다양한 스크롤 관련 기능을 개발할 때 유용하게 활용됩니다.