vue3 useScroll

`useScroll`是Vue 3中的一个自定义hook，它可以用于监听滚动事件并获取滚动位置。通过使用`useScroll`，我们可以轻松地在Vue 3项目中实现滚动相关的功能。

以下是一个示例代码，演示了如何在Vue 3中使用`useScroll`：

<template>
  <div>
    <div class="app-header-sticky" :class="{ show: y > 78 }">
      <!-- 在这里放置你的组件内容 -->
    </div>
    <div class="scroll-content">
      <!-- 在这里放置你的滚动内容 -->
    </div>
  </div>
</template>

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

export default {
  setup() {
    const { y } = useScroll(window);

    return {
      y,
    };
  },
};
</script>

<style>
.app-header-sticky {
  /* 在这里定义你的样式 */
}

.scroll-content {
  /* 在这里定义你的样式 */
}
</style>

在上面的代码中，我们首先导入了`useScroll`函数。然后，在`setup`函数中调用`useScroll`并传入`window`对象作为参数，以便基于窗口进行滚动。最后，我们将`y`属性返回给模板，以便在模板中使用。

在模板中，我们使用`:class`绑定来根据滚动位置动态添加或移除`show`类，从而控制组件盒子的显示与隐藏。

请注意，上述代码中的样式和组件内容只是示例，你需要根据自己的需求进行相应的修改。