使用vue3如何获取当前页面滚动条滚动了多少

在Vue3中，你可以使用`ref`和`watch`来监听窗口滚动事件，从而获取当前页面滚动条滚动了多少。以下是示例代码：

<template>
  <div>
    <p>页面已滚动 {{scrollTop}} 像素</p>
    <div style="height: 1000px;"></div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const scrollTop = ref(0)

    const handleScroll = () => {
      scrollTop.value = window.pageYOffset
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    return {
      scrollTop
    }
  }
}
</script>

在上面的例子中，我们使用`ref`函数来定义一个名为`scrollTop`的响应式变量，并将其初始值设为0。在`handleScroll`函数中，我们获取当前页面滚动条滚动了多少像素，并将其赋值给`scrollTop`变量。然后，我们使用`onMounted`和`onUnmounted`钩子来分别在组件挂载和卸载时添加和移除窗口滚动事件监听器。最后，我们将`scrollTop`变量返回给模板，以便在页面中显示当前滚动条滚动距离。