How to Get and Set Scroll Position of an Element using JavaScript ? Last Updated : 01 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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>GeeksforGeeks</h1> <div id="scroll-element"> <p> GeeksforGeeks is a computer science portal for geeks. </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: Comment More infoAdvertise with us Next Article How to Get and Set Scroll Position of an Element using JavaScript ? R rajatsandhu2001 Follow Improve Article Tags : JavaScript Web Technologies Geeks Premier League Geeks-Premier-League-2022 JavaScript-Methods JavaScript-Questions +1 More Similar Reads How to get the position of scrollbar using JavaScript ? 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, 3 min read How to Scroll to an Element Inside a Div using JavaScript? To scroll to an element within a div using JavaScript, set the parent div's scrollTop`to the target element's offsetTop. This method allows smooth navigation within a scrollable container. Below are the methods to scroll to an element inside a Div using JavaScript:Table of Content Using scrollIntoVi 3 min read How to get the height of scroll bar using JavaScript ? To get the height of scroll bar we could use different approaches. In this article, we are given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solving this problem which are discussed below: Table of Content Using Cont 3 min read How to get the Width of Scroll bar using JavaScript? Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth 3 min read How to change style of elements on scroll using jQuery ? We have given an HTML document containing some CSS properties, and the task is to change the CSS property to a particular element after scrolling the page using jQuery. To change the style of element on scroll, we get the number of pixels by which the content of an element has been scrolled horizont 2 min read How to Set Cursor Position in Content-Editable Element using JavaScript? To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery 3 min read How to find the position of HTML elements in JavaScript ? In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position: Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is 3 min read How to set smooth scroll after clicking the link using JavaScript ? Smooth scroll provides a seamless user experience as it provides an effective way to enhance website navigation. By implementing smooth scroll functionality, one can ensure that users transition fluidly between different sections of your webpage when they click on internal links.There are several me 4 min read How to Create a Fixed/Sticky Header on Scroll with CSS and JavaScript? A fixed or sticky header remains at the top of the webpage when the user scrolls down. This functionality enhances navigation and user experience by keeping important links always visible. In this article, we will explore the approach to creating a fixed/sticky header on scroll using CSS and JavaScr 3 min read How to Create a Change Background on Scroll using HTML CSS and JavaScript ? In this article, we will try to change the background color of the container once the scroll occurs. If a user scrolls down the page the background color will be changed. We will use the below approach to accomplish this task.Using the scroll event on the window objectIn this approach, we will use t 6 min read Like