Vuetify3： 根据滚动距离显示/隐藏搜索组件

我们在使用vuetify3开发的时候，产品需要实现当搜索框因滚动条拉拽的时候，消失，搜索组件再次出现在顶部位置。这个我们需要获取滚动高度，直接参考vuetify3 滚动指令​​​​​​​，执行的时候发现一个问题需要设置 max-height ，但是这个时候会出现滚动条，如果是主页就和浏览器的滚动条重复了。代码：

<template>
  <div>
    <v-row
      align="center"
      justify="center"
    >
      <v-col class="text-center">
        <div class="text-subtitle-2">Offset Top</div>
        {{ offsetTop }}
      </v-col>
    </v-row>
    <v-container
      id="scroll-target"
      class="overflow-y-auto"
      style="max-height: 400px"
    >
      <v-row
        align="center"
        justify="center"
        style="height: 1000px"
        v-scroll:#scroll-target="onScroll"
      >
      </v-row>
    </v-container>
  </div>
</template>
<script>
  export default {
    data: () => ({
      offsetTop: 0,
    }),

    methods: {
      onScroll (e) {
        this.offsetTop = e.target.scrollTop
      },
    },
  }
</script>

这个时候，这种方式就不怎么实用了，所以我们直接采用vue3的获取滚动距离来达到显示顶部搜索按钮需求，代码如下：

<template>
    <v-btn
        append-icon="mdi-account-circle"
        prepend-icon="mdi-check-circle"
        v-show="offsetTop>=100"
    >
     搜索
    </v-btn>
</template>

<script setup>
    const offsetTop= ref(0)

    const onScroll = (event) => {
        // 处理滚动事件
        offsetTop.value = window.pageYOffset || document.documentElement.scrollTop;
    };
</script>