HTML Window pageXOffset Property

Front End TechnologyHTMLWeb Development

The HTML Window pageXOffset property returns the value in pixel the current document has been scrolled horizontally from the left corner.


Following is the syntax −


Let us see an example of HTML Window pageXOffset Property −


 Live Demo

<!DOCTYPE html>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
      text-align: center;
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   .box {
      width: 1000px;
      height: 1000px;
      background: teal;
      color: #fff;
      font-size: 1.5rem;
      text-align: left;
      padding: 20px;
<h1>HTML Window pageXOffset Property Demo</h1>
<button onclick="scrollFn()" class="btn">Scroll</button>
<button onclick="display()" class="btn">Show pageXOffset value</button>
<div class="box"></div>
   function display() {
      document.querySelector('.box').innerHTML = 'The value of pageXOffset is: ' + window.pageXOffset + 'px';
   function scrollFn() {
      window.scrollBy(10, 0);


Click on “Show pageXOffset value” button to display the value of pageXOffset property:

Now click on “Scroll” button to scroll the page −

And then again click on “Show pageXOffset value” button to display the value of pageXOffset −

Updated on 01-Oct-2019 11:24:46