Window pageXOffset 속성

정의와 사용법

pageXOffset 속성은 문서가 창의 왼쪽 상단에서 스크롤된 픽셀 수를 반환합니다.

pageXOffset 속성은 scrollX 속성.

pageXOffset 속성은 읽기 전용입니다.

또한 참조:

screenX 속성

screenY 속성

인스턴스

예제 1

내용을 100 픽셀 스크롤하고 pageXOffset 및 pageYOffset를 표시합니다:

window.scrollBy(100, 100);
alert(window.pageXOffset + window.pageYOffset);

본인이 직접 시도해 보세요

예제 2

粘性 네비게이션 바 생성:

// 네비게이션 바를 가져옵니다
const navbar = document.getElementById("navbar");
// 네비게이션 바의 오프셋 위치를 가져옵니다
const sticky = navbar.offsetTop;
// 스크롤 위치에 도달하면 sticky 클래스를 네비게이션 바에 추가합니다. 스크롤 위치를 벗어났을 때 sticky 클래스를 제거합니다.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

본인이 직접 시도해 보세요

문법

window.pageXOffset

또는:

pageXOffset

반환 값

타입 설명
숫자 문서가 창의 왼쪽 상단에서 스크롤된 픽셀 수.

브라우저 지원

모든 브라우저가 지원합니다 window.pageXOffset：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원