Javascript body.scrollTop is not working

real380
New Member
4 0 0

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!

Reply 1 (1)
maxdanko
Shopify Partner
29 3 5

I think it should help.

 

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

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