vueuse 的API函数 useScroll

useScroll 是 VueUse 库提供的一个 API 函数，用于追踪页面的滚动状态。其返回值是一个包含以下属性的响应式对象：

1. x：页面的水平滚动位置
2. y：页面的垂直滚动位置
3. distance：页面已经滚动的距离
4. isScrolling：标志位，表示页面是否正在滚动中

你可以在你的 Vue 组件中使用 useScroll 函数来跟踪用户的滚动状态，进而实现一些特定的交互效果或者响应式布局。

以下是一个简单的例子：

<template>
  <div>
    <p>当前滚动距离：{{ scroll.distance }}px</p>
    <p>当前滚动方向：{{ direction }}</p>
  </div>
</template>

<script>
import { useScroll } from '@vueuse/core'

export default {
  setup() {
    const scroll = useScroll()

    // 通过计算当前滚动方向来实现不同的样式
    const direction = scroll.y.value > 0 ? '向下' : '向上'

    return {
      scroll,
      direction
    }
  }
}
</script>