Get scroll position Nuxt 3 inside onMounted

[podrivo]

Hello,

Please, I need help in getting the scroll position inside onMounted. I'm using Nuxt 3 with overlayscrollbars (2.4.5) and overlayscrollbars-vue (0.5.6).

This is my app.vue:

<template>
  <OverlayScrollbarsComponent ref="scrollComponent" defer :options="scrollOptions">
    <NuxtPage></NuxtPage>
  </OverlayScrollbarsComponent>
</template>

<script setup>
import { OverlayScrollbarsComponent } from "overlayscrollbars-vue"
const scrollComponent = ref(null)
const scrollOptions = ref({
  scrollbars: {
    autoHide: 'scroll'
  },
  overflow: {
    x: 'hidden',
    y: 'scroll'
  }
})

onMounted(() => {

  const scrollComponentElement = scrollComponent.value.$refs.slotRef

  scrollComponentElement.addEventListener('scroll', () => {
    console.log(scrollComponentElement.scrollY)
  })

}
</script>

.scrollY is giving me undefined

How to get the current position inside onMounted? Thank you!

[KingSora]

Good day @podrivo :)

If you want the scroll position to be available inside onMount you can't use the defer prop, since the purpose of that prop is to defer the initialization when the browser is idle. I've made a example for your here: https://stackblitz.com/edit/nuxt-starter-tfsttj?file=app.vue

In case you want to keep the defer prop I've also made an example of how to get the scroll position as soon as it is available: https://stackblitz.com/edit/nuxt-starter-kujasv?file=app.vue

[podrivo]

Hello @KingSora!

Thank you so much for your quick reply! 🙌

I've tried both options, but unfortunately all I got was a single {left: 0, top: 0}. It doesn't seems to be listening to scroll events. And this is also happening in the provided examples.

What might be the reason?

[podrivo]

Actually, it did work! I just had to add an event listener and it's working now!

onMounted(() => {
  const osInstance = scrollComponent.value.osInstance()
  const { scrollOffsetElement } = osInstance.elements()

  scrollOffsetElement.addEventListener('scroll', () => {
    console.log({
      left: scrollOffsetElement.scrollLeft,
      top: scrollOffsetElement.scrollTop,
    })
  })
}

Thank you so much @KingSora!

[podrivo]

And one other question, since I've noticed that the numbers on top: scrollOffsetElement.scrollTop might not be actual pixels?

If I scroll like 20px, it will show something like {top: 57}. So I wonder if scrollOffsetElement.scrollTop is accurate? Thank you!

[KingSora]

@podrivo scrollTop is a browser API: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop so it has nothing to do with the plugin.. Please check if you have any zoom applied.. this is the only thing I can think of which could mess with the values

[podrivo]

Of course! I thought it might be something to do with plugin setting the height, but it is exactly the same! Thank you for highlighting this! And thank you so much for the help!

All the best! (: