Window pageXOffset Property - Javascript Browser Object Model

Javascript examples for Browser Object Model:Window pageXOffset

  1. HOME
  2. Javascript
  3. Browser Object Model
  4. Window pageXOffset

Description

The pageXOffset properties returns the pixels the current document has been scrolled from the upper left corner of the window, horizontally.

The pageXOffset and pageYOffset properties are equal to the scrollX and scrollY properties.

These properties are read-only.

Return Value

A Number, representing the number of pixels that the document has already been scrolled from the upper left corner of the window, horizontally

The following code shows how to Scroll the content by 100 pixels, and alert the pageXOffset and pageYOffset:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {//from   w w  w .  j a  v  a  2s.  c  om
    border: 1px solid black;
    background-color: lightblue;
    height: 2000px;
    width: 2000px;
}
</style>
</head>
<body>

<button onclick="myFunction()" style="position:fixed;">Click me to scroll</button><br><br>

<div>
</div>

<script>
function myFunction() {
    window.scrollBy(100, 100);

    if (window.pageXOffset !== undefined) {
        console.log("Horizontal scroll: " + window.pageXOffset + ", Vertical scroll: " + window.pageYOffset);
    } else {
        // IE9 and earlier
        console.log("Horizontal scroll: " + document.documentElement.scrollLeft + ", Vertical scroll: " + document.documentElement.scrollTop);
    }
}
</script>

</body>
</html>

Related Tutorials