Why isn't my Javascript body.scrollTop functioning on my customized progress bar?

[real380]

Hey Guys, 

I am trying to implement a customized progress bar to one of my shopify pages and I need Javascript to implement it. Unfortunately my script is not working for shopify (even though it works on a different website)

I broke it down in the easiest way, only containing the not functioning parts:

HTML:

...

<div id="output"></div>

...

JS

var bodyy = document.querySelector("body");

document.addEventListener("scroll", () => {

output.textContent = bodyy.scrollTop;});

What's supposed to happen is that the output div changes depending on the scrolling position. But it returns 0 no matter what (the page is long enough to scroll and overflow is set to scroll)

Is anyone able to figure out why it doesn't recognize the scrolling position?

Thank you in advance!

[maxdanko]

I think it should help.

document.addEventListener("scroll", () => {

output.textContent = document.documentElement.scrollTop;});