HTML Window 객체의 pageXOffset 속성은 현재 문서가 화면 왼쪽 끝을 기준으로 수평 방향으로 얼마나 스크롤되었는지를 픽셀(pixel) 단위 값으로 반환합니다. 즉, 사용자가 페이지를 오른쪽으로 밀어낸 만큼의 거리를 숫자로 알려주는 속성입니다.
참고로 pageXOffset은 최신 표준인 window.scrollX 속성과 동일한 값을 반환하는 별칭(alias)이며, 두 속성 모두 읽기 전용(read-only)입니다.
구문(Sytax)
pageXOffset 속성의 기본 사용 구문은 다음과 같습니다.
window.pageXOffset
예제(Example)
아래 예제는 HTML Window pageXOffset 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭해 페이지를 스크롤하고, 그 시점의 pageXOffset 값을 화면에 출력해 봅니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.box {
width: 1000px;
height: 1000px;
background: teal;
color: #fff;
font-size: 1.5rem;
text-align: left;
padding: 20px;
}
</style>
<body>
<h1>HTML Window pageXOffset Property Demo</h1>
<button onclick="scrollFn()" class="btn">Scroll</button>
<button onclick="display()" class="btn">Show pageXOffset value</button>
<div class="box"></div>
<script>
function display() {
document.querySelector('.box').innerHTML = 'The value of pageXOffset is: ' + window.pageXOffset + 'px';
}
function scrollFn() {
window.scrollBy(10, 0);
}
</script>
</body>
</html>실행 결과(Output)
먼저 페이지를 실행하면 다음과 같은 초기 화면이 나타납니다.
여기서 [Show pageXOffset value] 버튼을 클릭하면 현재 pageXOffset 속성의 값이 화면에 표시됩니다.
이번에는 [Scroll] 버튼을 클릭해 페이지를 오른쪽으로 스크롤해 봅니다. 이 버튼은 window.scrollBy(10, 0) 메서드를 호출하여 문서를 x축 방향으로 10px씩 이동시킵니다.
스크롤 후 다시 [Show pageXOffset value] 버튼을 클릭하면, 스크롤된 만큼의 수평 거리가 픽셀 값으로 갱신되어 출력되는 것을 확인할 수 있습니다.
정리
pageXOffset 속성은 스크롤 이벤트 처리, 무한 스크롤 구현, 요소의 화면 노출 여부 판단 등 다양한 상황에서 유용하게 사용됩니다. 수직 스크롤 위치가 필요하다면 같은 방식으로 window.pageYOffset 또는 window.scrollY 속성을 활용하면 됩니다.