I am using @vueuse 's useScroll on my nuxt 3 projects. but useScroll seems not working . here is the codesandbox minimal reprodaction.
// app.vue
<script setup lang="ts">
const { x:mouseX, y:mouseY } = useMouse()
const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
</script>
<template>
<div>Mouse pos: {{mouseX}}, {{mouseY}}</div>
<div ref="el"></div>
<NuxtWelcome /> //inserted to make the page long so we can scroll
<div>Scroll po pos: {{x}}, {{y}}</div> // here is the problem both x and y are 0,0 no matter how you scroll
<NuxtWelcome /> //inserted to make the page long so we can scroll
</template>
It turns out the referenced element needs to be scrollable when overflow in my case style overflow:scroll