JavaScript Get Document Height: 3 Best Methods!

Spread the love

JavaScript Get Document Height: In web development, we have to know how to get document height in JavaScript. It’s very crucial and essential for developers. Document height measures everything below or above the current browser screen (viewport). Not the only browser viewport (viewable part). Don’t get confused with window height.

HTML document height is beneficial for various reasons. From determining scroll positions to developing responsive designs, knowing height is very important. Developers do not understand the difference between document height and window height.

In this article, we will describe the differences between them. Including every different way to get the document height in JavaScript with clear examples and explanations.

JavaScript Get Document Height: Why is it so important for us?

Knowing the height of the document helped us in various ways. Most of them are:
Responsive design: adjust layouts based on content length.
Infinite scrolling: load more content while customers reach the bottom.
Animations: trigger effects while users scroll through a particular section.

Methods to Get Document Height

There are a lot of ways to get document height in JavaScript. Let’s talk about some of the common approaches:

Using document.Body.ScrollHeight
Using document.DocumentElement.ScrollHeight
Combining offsetHeight and scrollHeight

1. Using document.body.scrollHeight

This method retrieves the complete height of the document, together with any content material not seen on the display screen. It is easy and commonly used.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Get Document Height Using document.body.scrollHeight</title>
    </head>

    <body>
        <p>Check document Height</p>

        <div style="height: 1000px">
            <!-- Other elements -->
             &nbsp;
        </div>

    </body>

    </html>

<script>
    
    const bodyHeight = document.body.scrollHeight;
    console.log("Body Height: " + bodyHeight);
    console.log("Window Inner Height: " + window.innerHeight);
    console.log("Window Outer Height: " + window.outerHeight);

</script>

Output – in pixels

javascript-get-document-height-using-scrollheight

Code Explanation

Window Inner Height: 695 denotes the web page visible contents within browser container. Do not include browser header section such as address bar, menu etc.
Window Outer Height: 816, denotes whole visible part of the browser.
Body Height: 1034, denotes the whole document height including contents that are not visible in browser.

Note

The window height is the visible area (browser viewport) only, whereas the document height includes everything below or above the visible area.

2. Using documentElement.scrollHeight

Similar to the previous approach, this method makes use of the documentElement (normally the <html> detail) to get the height.

const documentHeight = document.documentElement.scrollHeight;
console.log("Document Height: " + documentHeight);

3. Combining offsetHeight and scrollHeight

All modern browsers use the clientHeight and scrollHeight properties. But they are calculating heights in different ways. That’s why you may receive different values for different browsers.

To overcome this issue, the easiest way to get an accurate height is to collect all values first and then use only the highest one. The below code example shows all the height values that you need to collect first, and then how you can apply max to get the highest one.

Note

Testing the height of the document is always challenging because it returns 0 if the document is not ready yet. For dynamic control addition or deletion, resizing windows by users is another issue that requires a re-test. Use the onload or document-ready event if you want to check at loading time.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- Jquery CDN -->
        <script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <title>JavaScript Get Document Height Using document.body.scrollHeight</title>
    </head>

    <body>
        <p>Check document Height</p>

        <div style="height: 1000px">
            <!-- Other elements -->
             &nbsp;
        </div>

    </body>

    </html>

<script>

    const height = Math.max(
    document.body.scrollHeight, 
    document.documentElement.scrollHeight, 
    document.body.offsetHeight, 
    document.documentElement.offsetHeight, 
    document.body.clientHeight, 
    document.documentElement.clientHeight
    );
    console.log("Combined Document Height: " + height);
    
    // JQuery Get Document Height
    console.log("Combined Document Height using Jquery: " + $(document).height());

</script>

Output

JavaScript get document height: Output

Code Explanation

So, if you look at the output, we found that the received height is 1058. Whereas in our first approach, we found that scrollHeight returned 1034. Because scrollHeight only considers body height.

By using max we are getting the accurate document height. Checked the value with JQuery $(document).height() method and found same result. Which denotes that this combined approach is more accurate than using scrollHeight or offsetHeight independently.

Note

The offsetHeight property returns the visible height of an element (pixels), including padding, border, and scrollbar. Not the margin.

Comparing Methods

Method	Description	Use Case
document.body.scrollHeight	Total height of the document body.	General use, simple pages.
document.documentElement.scrollHeight	Total height of the HTML document.	Consistent across browsers.
Combination of heights	Uses multiple properties for accuracy.	Complex layouts, browser issues.

Method Comparison

JavaScript Get Document Height: Tips

Cross-browser compatibility: Always check on multiple browsers to ensure accuracy.
Performance Considerations: Be mindful of performance issues; for complicated documents, you may suffer.
Responsive Design: Adjust based on the viewport size and dynamic elements addition or deletion-related layout changes to maintain a seamless user experience.

Conclusion

JavaScript Get Document Height is easy, with several methods that we have discussed so far. Based on your project needs, choose the right approach to manage your specific use case. Whether you are working on responsive designs or implementing countless scrolling, use the 3rd approach to get document height in JavaScript accurately.

Experiment with the provided examples repeatedly. Remember, each method calculates heights differently. Always consider browser menu, address bar height, HTML element padding margin, and document header footer—which approach includes what and excludes what? Happy coding!