How to get the position of scrollbar using JavaScript ?

18 Mar, 2020
JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below:
Method 1: Whenever the function getScroll() is encountered, it sets the current value of the scrollbar to the span element whose id is position. The scrollbar position along a horizontal and vertical axis is denoted by integers. The pageXOffset property returns the number of pixels scrolled along the horizontal axis (i.e. left and right) and the pageYOffset property returns the number of pixels scrolled along the vertical axis (i.e. top and bottom). The pageXOffset and pageYOffset properties are equal to the scrollX and scrollY properties and are the read-only properties.
Program:<!DOCTYPE html><html>  <head>    <title>        Scrollbar position using JavaScript/jQuery?    </title>    <style>        .scroll-area {            height: 1000px;            background-color: #eee;            padding: 10%;        }                  button {            margin-top: 200px;            margin-bottom: 100px;            display: block;        }    </style></head>  <body>    <h1 style="color: green">        GeeksforGeeks     </h1>    <div>        <p>Current position is:          <b><span id="position"></span></b>        </p>    </div>    <p>      Click on the buttons below to get the current      position of the scrollbar.    </p>      <p class="scroll-area">      GeeksforGeeks is a computer science portal.       This is a large scrollable area.          <button onclick="getScroll()">           Click to get current scrollbar position        </button>        <button onclick="getScroll()">           Click to get current scrollbar position         </button>        <button onclick="getScroll()">           Click to get current scrollbar position         </button>    </p>        <script>        getScroll = () => {            var position = document.getElementById('position');            position.innerHTML = ""            if (window.pageYOffset != undefined) {                position.innerHTML = " X-axis : "                 + pageXOffset + " Y-axis : " + pageYOffset;            } else {                var x_axis, y_axis, doc = document,                    ele = doc.documentElement,                    b = doc.body;                x_axis = ele.scrollLeft || b.scrollLeft || 0;                y_axis = ele.scrollTop || b.scrollTop || 0;                position.innerHTML = " X-axis : "                + x_axis + " Y-axis : " + y_axis;            }        }    </script></body>  </html>
<!DOCTYPE html><html>  <head>    <title>        Scrollbar position using JavaScript/jQuery?    </title>    <style>        .scroll-area {            height: 1000px;            background-color: #eee;            padding: 10%;        }                  button {            margin-top: 200px;            margin-bottom: 100px;            display: block;        }    </style></head>  <body>    <h1 style="color: green">        GeeksforGeeks     </h1>    <div>        <p>Current position is:          <b><span id="position"></span></b>        </p>    </div>    <p>      Click on the buttons below to get the current      position of the scrollbar.    </p>      <p class="scroll-area">      GeeksforGeeks is a computer science portal.       This is a large scrollable area.          <button onclick="getScroll()">           Click to get current scrollbar position        </button>        <button onclick="getScroll()">           Click to get current scrollbar position         </button>        <button onclick="getScroll()">           Click to get current scrollbar position         </button>    </p>        <script>        getScroll = () => {            var position = document.getElementById('position');            position.innerHTML = ""            if (window.pageYOffset != undefined) {                position.innerHTML = " X-axis : "                 + pageXOffset + " Y-axis : " + pageYOffset;            } else {                var x_axis, y_axis, doc = document,                    ele = doc.documentElement,                    b = doc.body;                x_axis = ele.scrollLeft || b.scrollLeft || 0;                y_axis = ele.scrollTop || b.scrollTop || 0;                position.innerHTML = " X-axis : "                + x_axis + " Y-axis : " + y_axis;            }        }    </script></body>  </html>
Output:
Method 2: Scrollbar position using event listener. The Window interface represents a window containing a DOM document and we can get the scrollbar position by adding an event-listener on it. This function will automatically be triggered whenever the scroll event triggers. The scrollX and scrollY return the floating values. Whenever the scroll event occurs the event listener will automatically trigger and updates the value of the scrollbar position in the element whose id is the position.
Program:<!DOCTYPE html><html>  <head>    <title>        Scrollbar position using JavaScript/jQuery?    </title>    <style>        .scroll-area {            height: 1000px;            background-color: #eee;            padding: 10%;        }                  #sticky {            position: sticky;            top: 0;            background: #008000;            color: white;            padding: 1px;            text-align: center;        }    </style></head>  <body>    <h1 style="color: green">      GeeksforGeeks     </h1>      <div id="sticky">        <p>Current position is:          <b><span id="position"></span></b>        </p>    </div>    <p>      Click on the buttons below to get the       current position of the scrollbar.    </p>      <p class="scroll-area">      GeeksforGeeks is a computer science portal.      This is a large scrollable area.    </p>    <script>        var position = document.getElementById('position');        position.innerHTML = ""          window.addEventListener("scroll", function(event) {              var scroll_y = this.scrollY;            var scroll_x = this.scrollX;            console.log(scroll_x, scroll_y);            position.innerHTML = " X-axis : "             + scroll_x + "Y-axis : " + scroll_y        });    </script></body>  </html>
<!DOCTYPE html><html>  <head>    <title>        Scrollbar position using JavaScript/jQuery?    </title>    <style>        .scroll-area {            height: 1000px;            background-color: #eee;            padding: 10%;        }                  #sticky {            position: sticky;            top: 0;            background: #008000;            color: white;            padding: 1px;            text-align: center;        }    </style></head>  <body>    <h1 style="color: green">      GeeksforGeeks     </h1>      <div id="sticky">        <p>Current position is:          <b><span id="position"></span></b>        </p>    </div>    <p>      Click on the buttons below to get the       current position of the scrollbar.    </p>      <p class="scroll-area">      GeeksforGeeks is a computer science portal.      This is a large scrollable area.    </p>    <script>        var position = document.getElementById('position');        position.innerHTML = ""          window.addEventListener("scroll", function(event) {              var scroll_y = this.scrollY;            var scroll_x = this.scrollX;            console.log(scroll_x, scroll_y);            position.innerHTML = " X-axis : "             + scroll_x + "Y-axis : " + scroll_y        });    </script></body>  </html>
Output:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to Open URL in New Tab using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?