Window pageYOffset 속성

정의와 사용법

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

pageYOffset 속성은 scrollY 속성.

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

자세히 보기:

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.pageYOffset

또는:

pageYOffset

반환 값

형식 설명
숫자 창의 왼쪽 상단에서 스크롤된 픽셀 수

브라우저 지원

모든 브라우저가 지원합니다 pageYOffset：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
지원 9-11 지원 지원 지원 지원