Calculate Scroll Position in A Div+ Vanilla Js

This guide explains how to calculate the scroll position within a specific div element using vanilla JavaScript. We'll cover the key properties, methods, and a practical implementation with a live calculator.

How to Calculate Scroll Position in a Div

To determine the scroll position within a div element, you need to examine several properties of the element and its container. Here's what you need to know:

Key Properties

scrollTop: The number of pixels the content is scrolled vertically
scrollHeight: The total height of the content, including content not visible
clientHeight: The height of the visible portion of the element

Calculation Methods

The scroll position percentage can be calculated using this formula:

scrollPosition = (scrollTop / (scrollHeight - clientHeight)) * 100

This formula gives you the percentage of how far the user has scrolled through the content. A value of 0 means the user is at the top, while 100 means they've reached the bottom.

Implementation Steps

Select the target div element
Add a scroll event listener to the element
In the event handler, calculate the scroll position using the formula above
Use the result to update your UI or trigger other actions

Formula for Scroll Position Calculation

The exact formula used in our calculator is:

scrollPosition = (scrollTop / (scrollHeight - clientHeight)) * 100

Where:

scrollTop is the number of pixels the content is scrolled vertically
scrollHeight is the total height of the content
clientHeight is the height of the visible portion of the element

Note: This formula assumes the element has scrollable content. If the content fits entirely within the element, scrollHeight will equal clientHeight, and the result will be 0.

Worked Example

Let's walk through a practical example to see how this works in a real scenario.

Scenario

Consider a div with these dimensions:

Visible height (clientHeight): 300px
Total content height (scrollHeight): 1200px
Current scroll position (scrollTop): 450px

Calculation

Using our formula:

scrollPosition = (450 / (1200 - 300)) * 100 scrollPosition = (450 / 900) * 100 scrollPosition = 0.5 * 100 scrollPosition = 50%

This means the user has scrolled halfway through the content in this example.

FAQ

What happens if the content fits entirely in the div?: If scrollHeight equals clientHeight, the result will be 0 because there's no scrollable content.
Can I use this with horizontal scrolling?: Yes, you can use the same approach with scrollLeft, scrollWidth, and clientWidth for horizontal scrolling.
How often does the scroll event fire?: The scroll event fires frequently as the user scrolls, so you may want to throttle or debounce the event handler for performance.
Is this method compatible with all browsers?: Yes, these properties are supported in all modern browsers, including IE9 and above.