Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

Window 인터페이스의 scrollX 읽기 전용 속성은 문서가 수평으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다. 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다. 수직 스크롤은 scrollY 속성을 사용하여 가져올 수 있습니다.

구문

var x = window.scrollX

반환하는 값은 문서가 원점으로부터 수평방향으로 스크롤한 픽셀의 수를 나타내는 배정밀도 부동소수점 값입니다. 양의 값이 왼쪽 스크롤을 의미합니다. 문서를 픽셀보다 작은 정밀도의 장치에서 렌더링한 경우 반환값의 정밀도도 높아져 소숫값을 반환할 수 있습니다. 문서가 좌우로 전혀 움직이지 않은 상태면 0을 반환합니다.

정숫값이 필요하면 Math.round()를 사용해 반올림할 수 있습니다.

더 기술적인 용어로, scrollX는 현재 뷰포트 왼쪽 모서리의 X좌표를 반환하고, 뷰포트가 없으면 0을 반환합니다.

예제

다음 예제는 문서의 현재 스크롤 위치가 400픽셀이 넘으면 맨 처음으로 돌아갑니다.

if (window.scrollX > 400) {
  window.scroll(0,0);
}

참고

pageXOffset 속성은 scrollX 의 다른 이름입니다.

window.pageXOffset === window.scrollX; // 항상 true

브라우저 호환성을 위해서는 window.scrollX 대신 window.pageXOffset을 사용하세요. 이에 더해, Internet Explorer 9 미만에서는 두 속성 모두 지원하지 않으므로 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

명세

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'window.scrollX' in that specification.
Working Draft  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollXChrome Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Edge Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Firefox Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
IE No support No
No support No
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Opera Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Safari Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
WebView Android Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Chrome Android Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Firefox Android Full support Yes
Full support Yes
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Opera Android Full support Yes
Full support Yes
?
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Safari iOS Full support Yes
Full support Yes
?
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Samsung Internet Android Full support Yes
Full support Yes
?
Alternate Name
Alternate Name Uses the non-standard name: pageXOffset
Subpixel precisionChrome Full support YesEdge Full support YesFirefox Full support 55IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 55Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Uses a non-standard name.
Uses a non-standard name.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta
최종 변경자: alattalatta,