We might want to find the total scrollable height of a page (document) or a specific element using JavaScript for different reasons. You can use this height to automatically go to the bottom of a page with a button click.
It is also useful to detect when a user scrolled to the bottom of a page and you can perform some action whenever it happens. For example, you can load more data when users reach to the bottom. It adds the infinite scrolling feature to your webpage.
In this blog post, we will discuss the process of getting the scrollable height of an entire document or an element in JavaScript step by step.
How to Get Scrollable Height of a Page in JavaScript
To get the scrollable height of the page (viewport) in JavaScript, you can use the document.documentElement element, which represents the root element of the document (i.e., the <html> element).
This element has the scrollHeight property that represents the total height of the entire page, from the very top to the very bottom, including any parts that are currently hidden from view and require scrolling to access.
You also need to use the window.innerHeight property. It represents the height of the viewport, which is the area of the web page that is visible inside the browser window without any scrolling.
These two properties are used to calculate the total scrollable height of a page:
document.documentElement.scrollHeight– Returns the total height of an entire page.window.innerHeight– Returns the height of a web page area that is visible without any scrolling.
const scrollbarHeight = document.documentElement.scrollHeight - window.innerHeight
console.log(scrollbarHeight)
Substruct the window.innerHeight from the document.documentElement.scrollHeight value to find the scrollable height of a page. This is the difference between the total height of the web page and the height of the visible viewport.
This value represents the amount of space you need to scroll in order to reach the bottom of your webpage.
Also Read: How to Get Scrollbar Position in JavaScript of a Page or div
How to Get Scrollable Height of an Element in JavaScript
If any section of your webpage contains a scrollbar, you can also calculate the scrollable height of that element. JavaScript has built-in properties for that.
These are the two JavaScript properties that can be used to get the scrollable height of an element:
scrollHeight– Returns the total height of the element's content, including any content that overflows and is not visible.clientHeight– Returns the visible height of an element inside its content box, without including any space that may be added by its border or margin.
const element = document.getElementById('my-element'); // replace 'my-element' with the ID of your element
const scrollableHeight = element.scrollHeight - element.clientHeight;
console.log('Scrollable height: ', scrollableHeight);
Substruct clientHeight property value from the scrollHeight property value to get the total scrollable height of an element in JavaScript. Even if you change the height of your element, this scrollable height value will automatically adjust with the change.
Also Read: Ultimate Guide to Create Custom Scrollbars in CSS
Conclusion
You explored different JavaScript properties that can be used to determine how much a page or an element can be scrolled. You can use this value to do different things.
Like, whenever a user goes to the bottom of your page, you can show a "Back to top" button. If a user clicks this button, it will scroll the user back to the top of the page automatically.
