In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.
Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.
We create an HTML div element with an id of “scroll-element” and select it using the querySelector() method. A paragraph element is defined within this division element with a height and width greater than that of the div element for the scroll bars to be visible. Another div element is created with the “output” class to show the scroll position of the first division element. Use the addEventListener() method to attach an event listener to the div element with an id of “scroll-element”. The event to be attached is the scroll event.
Update the inner content of the div element with the “output” class using the innerHTML property. The scrollTop property gets or sets the number of pixels that an element’s content is scrolled vertically whereas the scrollLeft property gets or sets the number of pixels that an element’s content is scrolled from its left edge. The innerHTML is repeatedly updated on scrolling through the HTML document.
Note: The scrollTop and scrollLeft properties may return an unrestricted double data type in certain situations so the Math.ceil() method is used to round up to the nearest integer.
Example: In this example, apart from the scroll event, there are two buttons created with classes “scroll-top-btn” and “scroll-left-btn” respectively. The first button on click increments the scrollTop property of the div element with an id of “scroll-element” by 25 and the second button on click increments the scrollLeft property of the division element by 25.
HTML
<!DOCTYPE html> <html> <head> <!-- Basic inline styling --> <style> body { text-align: center; } h1 { color: green; } p { font-size: 20px; font-weight: bold; } #scroll-element { height: 18.75rem; width: 18.75rem; overflow: auto; background-color: green; margin: 0 auto; color: white; } #scroll-element p { height: 25rem; width: 25rem; } .output { margin-top: 2rem; } button { margin-top: 2rem; cursor: pointer; } </style> </head> <body> <h1>neveropen</h1> <div id="scroll-element"> <p> neveropen is a computer science portal for neveropen. </p> </div> <button class="scroll-top-btn">Scroll Top</button> <button class="scroll-left-btn">Scroll Left</button> <div class="output"></div> <script type="text/javascript"> const scrollElement = document.querySelector("#scroll-element"); const scrollTopBtn = document.querySelector(".scroll-top-btn"); const scrollLeftBtn = document.querySelector(".scroll-left-btn"); const outputDiv = document.querySelector(".output"); scrollTopBtn.addEventListener("click", function () { scrollElement.scrollTop += 25; }); scrollLeftBtn.addEventListener("click", function () { scrollElement.scrollLeft += 25; }); scrollElement.addEventListener("scroll", () => { outputDiv.innerHTML = `scrollTop: ${Math.ceil(scrollElement.scrollTop)} <br> scrollLeft: ${Math.ceil(scrollElement.scrollLeft)} `; }); </script> </body> </html> |
Output:
