Jump to content

Cannot get document.body height

Recommended Posts

Site URL: https://walrus-bellflower-k256.squarespace.com/

I've tried a number of ways. It seems the page loads fully on the initial render, as the scrollbar indicates, but I can only seem to get the height of the element that my JS code is inside of, and not the whole document itself. I'm building a scroll-progress-bar for a client and need to know how much of the document they've scrolled through.

I thought I might be able to get the footer element and measure the distance from there, but that's also undefined.

This was my latest attempt, using all the possible document.height attributes I could find haha, but still nothing:

const body = document.body
const html = document.documentElement
const h = Math.max(
  body.scrollHeight, body.offsetHeight, 
  html.clientHeight, html.scrollHeight, html.offsetHeight

still only returns 589, but the document scrolls to 4715

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Please post the URL for the page on your site where you are using this code.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue. Without being able to use the code in context it is difficult to help.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.