Nuxt 3中使用@vueuse useScroll无效的问题求助

你当前的问题出在绑定的滚动元素错误：你把useScroll监听的目标设为了一个空的<div ref="el">，这个元素没有可滚动的内容，也不会触发滚动事件，所以x、y值一直是0。而页面的全局滚动是发生在window对象上的。

解决方法一：监听全局窗口滚动 #

直接调用useScroll()不传入元素参数，它默认会监听window的滚动：

<script setup lang="ts">
const { x:mouseX, y:mouseY } = useMouse()

// 默认监听window的滚动
const { x, y, isScrolling, arrivedState, directions } = useScroll()
</script>

<template>
  <div>Mouse pos: {{mouseX}}, {{mouseY}}</div>

  <NuxtWelcome />
  <div>Scroll pos: {{x}}, {{y}}</div>
  <NuxtWelcome />
</template>

解决方法二：监听特定元素的滚动（如果需要） #

如果你确实要监听某个元素的滚动，必须确保该元素满足两个条件：

• 设置固定的高度（或最大高度）
• 内容超出元素高度，且设置overflow: auto或overflow: scroll

修改后的示例：

<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" style="height: 400px; overflow-y: auto; border: 1px solid #ccc;">
    <div style="height: 1200px;">
      <NuxtWelcome />
      <div>Scroll pos: {{x}}, {{y}}</div>
      <NuxtWelcome />
    </div>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Seyid Takele