Javascript Browser Window pageXOffset and pageYOffset Property

Introduction

Scroll the content by 100 pixels, and alert the pageXOffset and pageYOffset: 

window.scrollBy(100, 100); alert(window.pageXOffset + window.pageYOffset);

Click the button to scroll the document window by 100px horizontally and vertically.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from w ww.ja  v  a 2 s .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>

<p id="demo"></p>


<script>
function myFunction() {
  window.scrollBy(100, 100);
  document.getElementById("demo").innerHTML = "pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset;
}
</script>

</body>
</html>

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

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

These properties are read-only.

The pageXOffset and pageYOffset properties returns a Number representing the number of pixels that the document has been scrolled from the upper left corner of the window, horizontally and vertically.




PreviousNext

Related