Window scrollY 속성

정의와 사용법

scrollY 속성은 문서가 윈도우 상단 왼쪽에서 스크롤된 픽셀 수를 반환합니다.

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

알림

scrollY 속성은 pageYOffset 속성

크로스 브라우저 호환성을 위해 사용하십시오 window.pageYOffset 대신 window.scrollY

또한 참조:

pageXOffset 속성

pageYOffset 속성

예제

예제 1

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

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

자신이 직접 시도해보세요

예제 2

粘性 네비게이션 바 생성:

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

자신이 직접 시도해보세요

문법

window.scrollY

또는:

scrollY

반환 값

타입 설명
숫자 문서가 윈도우 상단 왼쪽에서 스크롤된 픽셀 수입니다。

브라우저 지원

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

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