I have a very long (height) webpage and I'm using Puppeteer to get a PDF export of the page. It's about 30,000 px long.

I'm using document.documentElement.scrollHeight to try to determine dynamically the total height but it is returning 1018 when console.log and the PDF export is showing the same.

The 1018 is the viewport height so if I change the window it changes also.

Curious why this is?

The height is returning this way even in direct inspect > console.log and not using Puppeteer.

Any ideas why the height is not correct or how to fix this?

UPDATE: This is my layout in nuxt

<template>
  <div
    id="my-app"
    ref="layout"
    class="flex flex-col h-screen overflow-hidden bg-gray-100 font-museo-sans"
  >
    <main class="overflow-y-auto">
      <div class="max-w-7xl mx-auto py-5 xl:rounded-lg xl:shadow-md">
        <Nuxt class="transition-opacity duration-200" />
      </div>
    </main>
  </div>
</template>

The overflow-hidden and h-screen for some reason is necessary for my-app as if I remove it, the page does not allow for scroll.

I'm not quite understanding the behavior of this though. Why would overflow-hidden and setting a height to viewport allow the scrolling of the nuxt application?

In addition, I thought documentElement.scrollHeight returns overflow hidden but I guess it does not.