Nuxt.js: document.body.scrollTop always returns 0 in Safari

[davision]

Does anyone have an issue getting the scroll offset in Safari or iOS devices?
This works perfectly in Firefox:

this.scrollPosition = document.body.scrollTop

but in Safari I'm always getting 0, no matter what. That happens only with Nuxt apps.

Thanks for your help!

_{This question is available on Nuxt.js community (#c2182)}

[neonerd]

This is the correct way to get body scrollTop in modern browsers:

function getBodyScrollTop () { const el = document.scrollingElement || document.documentElement return el.scrollTop }

This is not a nuxt related question though, so should be closed.

[davision]

Hey, thank you for your reply. I am aware that this shouldn't be Nuxt related, but as the thing is that your method works in plain HTML, but not as a Nuxt/Vue method. And I have no idea why. Asking, if anyone else had a similar problem.

[davision]

Ok, so I found out what is the issue. I had a css on body element, which prevents .scrollTop to get correct value. But interestingly, only in Safari.

body {
  overflow-x: hidden;
}

The issue can be closed.

[lincenying]

const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)

[davision]

Thank you! This is very helpful!

[hookkent]

Have you solved it, please? I have the same problem.

[davision]

Yes, my problem was overflow-x: hidden on a body element. Check, if you're having the same attribute.

[hookkent]

@davision thanks 谢谢你 我再试下 ：）

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.