Window scrollX 속성

정의와 사용법

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

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

알림

scrollX 속성은 pageXOffset 속성.

브라우저 간 호환성을 위해 다음 속성을 사용하십시오: window.pageXOffset 대신 window.scrollX.

추가로 참조하십시오:

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

또는:

scrollX

반환 값

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

브라우저 지원

모든 브라우저에서 지원됨 window.scrollX：

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