How to Get Scrollbar Position in JavaScript of a Page or div

If you want to add any features like custom animations or load new content dynamically whenever users scroll to a specific section of your page then it is important to get the scrollbar position of your page using JavaScript.

For example, you might want to show a progress bar or loading indicator as the user scrolls down the page, or you might want to trigger a pop-up when the user reaches a certain point on the page.

In this blog post, we'll cover everything you need to know about getting the position of a scrollbar in JavaScript for a page or div element.

Getting Scrollbar Position Using JavaScript for a Page

In order to get the position of a scrollbar on a webpage, you need to use the JavaScript window object. This object has some properties to track vertical and horizontal scrollbars.

There are 2 properties in the window object to get the scrollbar position of a page:

• Vertical Scrollbar Position – Get the position of a vertical scrollbar on the web page using window.scrollY property.
• Horizontal Scrollbar Position – Get the position of a horizontal scrollbar on the web page using window.scrollX property.

These 2 properties track and store the position values of page scrollbars. You can access these properties with other events like click or scroll in JavaScript.

Find Scrollbar Position of a Page on a Button Click

If you need to find the scrollbar position on a button click, it's very easy to do. Just select your button element and listen to the click event.

Inside your event callback function, you can access those properties to get the current scrollbar position of your page.

          const btn = document.getElementById('btn')

btn.addEventListener('click', () => {
    const vertical = window.scrollY    // Getting vertical scrollbar position
    const horizontal = window.scrollX    // Getting horizontal scrollbar position

    console.log(`Vertical scrollbar Position of a page: ${vertical}`)
    console.log(`Horizontal scrollbar Position of a page: ${horizontal}`)
})
        

When I click the button, it will access the scrollY and scrollX properties to find both the vertical and horizontal scrollbar positions of my page. Now you can use these values however you want in your application.

Find Scrollbar Position of a Page While Scrolling

If you need to track the page scrollbar position every time a user scrolls the page, there is a scroll event for that. Just like the click event, you will listen to this event on the document object in JavaScript.

          document.addEventListener('scroll', () => {
    const vertical = window.scrollY    // Getting vertical scrollbar position
    const horizontal = window.scrollX    // Getting horizontal scrollbar position

    console.log(`Vertical scrollbar Position of a page: ${vertical}`)
    console.log(`Horizontal scrollbar Position of a page: ${horizontal}`)
})
        

This event fires every time users scroll the page. Therefore, you will get the scrollbar positions in real time. You can use this technique to check if a user scrolled to the bottom of a page in JavaScript by getting the current position of the scrollbar.

Getting Scrollbar Position in JavaScript for a Div Element

Sometimes we use scrollbars in an HTML element. You can also find the vertical and horizontal scrollbar positions inside that element.

There are 2 easy steps to get the scrollbar position of an HTML element:

• Step 1: Select the element that has scrollbars.
• Step 2: Find the vertical position of a scrollbar using scrollTop property from that element and find the horizontal scrollbar position using scrollLeft property.

You can follow these steps with other events like click or scroll in JavaScript.

Find Scrollbar Position of an Element on a Button Click

To access the current scrollbar position value of an element on the button click, listen to the click event on a button element. Inside the event callback function, you can use scrollTop and scrollLeft properties.

          const btn = document.getElementById('btn')
const box = document.getElementById('box')

btn.addEventListener('click', () => {
    const vertical = box.scrollTop    // Getting vertical scrollbar position of a div
    const horizontal = box.scrollLeft    // Getting vertical scrollbar position of a div

    console.log(`Vertical scrollbar Position of a div: ${vertical}`)
    console.log(`Horizontal scrollbar Position of a div: ${horizontal}`)
})
        

I have a div element with an ID box that has scrollbars. I want to find the position of these scrollbars. There is also a button with an ID btn.

Whenever this button gets clicked, it gets the box.scrollTop and box.scrollLeft property values to find the current vertical and horizontal scrollbar positions of this element.

Find Scrollbar Position of an Element While Scrolling

You can obtain the scrollbar positions of an element on scroll event just like the page. Instead of listening to the click event, you have to listen to the scroll event on that element.

          const box = document.getElementById('box')

box.addEventListener('scroll', () => {
    const vertical = box.scrollTop    // Getting vertical scrollbar position of a div
    const horizontal = box.scrollLeft    // Getting vertical scrollbar position of a div

    console.log(`Vertical scrollbar Position of a div: ${vertical}`)
    console.log(`Horizontal scrollbar Position of a div: ${horizontal}`)
})
        

Here I am listening to the scroll event on this box element. Whenever you scroll the element, this event will fire and you will get the positions of your scrollbars.

Also Read: How to Get Scrollable Height of a Page or Element in JavaScript

Conclusion

Tracking the scrollbar position in JavaScript for a page or div element can greatly enhance the user experience on a website. But you need to make sure your code is optimized for performance and not taking too many resources.

Other than that, it gives you the power of controlling the behavior of your webpage depending on the scrollbar positions. You can include features like "Infinite scrolling" or "Back to the top of a page" etc.

Therefore, we can say knowing how to get the scrollbar position in JavaScript of a page or an element is a valuable skill for any web developer.