Window scrollX

Example 1

Scroll the content by 100 pixels, and alert the scrollX and scrollY:

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);
Try it Yourself »

More examples below.


Description

The scrollX property returns the pixels a document has scrolled from the upper left corner of the window.

The scrollX property is read-only.

Note

The scrollX property is equal to the pageXOffset property.

For cross-browser compatibility, use window.pageXOffset instead of window.scrollX.

See Also:

The pageXOffset Property

The pageYOffset Property


Syntax

window.scrollX
or just:
scrollX

Return Value

Type Description
A numberThe number of pixels the document has scrolled from the upper left corner of the window.


More Examples

Create a sticky navigation bar:

// Get the navbar
const navbar = document.getElementById("navbar");

// Get the offset position of the navbar
const sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
Try it Yourself »

Browser Support

window.scrollX is supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.