How to Get the Scroll Position of an Element in JavaScript

When developing a user interface in the browser, it is often necessary to determine the current horizontal and vertical scrolling position of a scrollable element. So, how can you achieve this?

To obtain the scroll position of an element in JavaScript, you can utilize the scrollLeft and scrollTop properties of the element.

The scrollLeft property represents the horizontal scrolling position, while the scrollTop property represents the vertical scrolling position. The 0, 0 position is always located at the top left corner, so any scrolling is relative to that.

Here’s an example of how to access the scroll position of an element:

1
2
3

const container = document.querySelector('.container');
const verticalScrollPosition = container.scrollTop;
const horizontalScrollPosition = container.scrollLeft;

The scrollTop and scrollLeft properties are read-write, which means that you can not only retrieve the scroll position but also set it. Here is an example:

1
2
3

const container = document.querySelector('.container');
container.scrollTop = 1000;
container.scrollLeft = 1000;

By assigning values to scrollTop and scrollLeft, you can programmatically set the scroll position of the element.

Please note: The example image provided shows a macOS Finder window with scrollbars, but it serves to illustrate the concept of scroll position in a visual manner.

Tags: JavaScript, DOM, scroll position