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:
Approach 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.
Example: In this example, we are using the above-explained approach.
html
<style> .scroll-area { height: 1000px; background-color: #eee; padding: 10%; } button { margin-top: 200px; margin-bottom: 100px; display: block; }</style><h1 style="color: green"> neveropen</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"> neveropen 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 = () => { let position = document.getElementById('position'); position.innerHTML = "" if (window.pageYOffset != undefined) { position.innerHTML = " X-axis : " + pageXOffset + " Y-axis : " + pageYOffset; } else { let 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> |
Output:
Approach 2: Scrollbar position using an 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.
Example: This example is demonstrated above approach.
html
<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><h1 style="color: green"> neveropen</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"> neveropen is a computer science portal. This is a large scrollable area.</p><script> let position = document.getElementById('position'); position.innerHTML = "" window.addEventListener("scroll", function (event) { let scroll_y = this.scrollY; let scroll_x = this.scrollX; console.log(scroll_x, scroll_y); position.innerHTML = " X-axis : " + scroll_x + "Y-axis : " + scroll_y });</script> |
Output:
