JavaScript의 scrollX 속성은 pageXOffset 속성과 완전히 동일하게 동작합니다. 브라우저 창의 왼쪽 위 모서리를 기준으로 문서가 가로 방향으로 얼마나 스크롤되었는지를 픽셀 단위로 확인하고 싶을 때 scrollX 속성을 사용하면 됩니다.
참고로 세로 방향의 스크롤 위치를 구하려면 scrollY(또는 pageYOffset) 속성을 함께 사용하는 것이 좋습니다. 이 두 속성은 읽기 전용(read-only)이며, 현재 스크롤된 위치를 실시간으로 반환합니다.
scrollX 속성 예제
아래 코드를 실행하면 JavaScript에서 scrollX 속성이 어떻게 동작하는지 직접 확인할 수 있습니다. 버튼을 클릭하면 문서를 오른쪽과 아래로 각각 200픽셀씩 스크롤한 후, 현재 가로 스크롤 위치를 알림 창으로 표시합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 1500px;
width: 1500px;
}
</style>
</head>
<body>
<script>
function scrollFunc() {
window.scrollBy(200, 200);
alert("Horizontal: " + window.scrollX);
}
</script>
<button onclick = "scrollFunc()" style = "position:fixed;">Scroll</button>
<br><br><br>
<div>
</div>
</body>
</html>위 예제에서는 크기가 1500×1500픽셀인 노란색 div 요소를 만들어 문서에 충분한 스크롤 공간을 확보했습니다. 고정(fixed) 위치의 버튼을 클릭하면 window.scrollBy(200, 200) 메서드가 실행되어 문서가 스크롤되고, 이후 window.scrollX 값이 화면에 표시됩니다.
scrollX 속성은 주요 브라우저(Chrome, Firefox, Safari, Edge 등)에서 폭넓게 지원되므로, 별도의 호환성 처리 없이 안전하게 사용할 수 있습니다.