Vuetify3： 根据滚动距离显示/隐藏搜索组件
我们在使用vuetify3开发的时候，产品需要实现当搜索框因滚动条拉拽的时候，消失，搜索组件再次出现在顶部位置。这个我们需要获取滚动高度，直接参考vuetify3 滚动指令，执行的时候发现一个问题需要设置 max-height ，但是这个时候会出现滚动条，如果是主页就和浏览器的滚动条重复了。代码：
<template><div><v-rowalign="center"justify="center"><v-col class="text-center"><div class="text-subtitle-2">Offset Top</div>{{ offsetTop }}</v-col></v-row><v-containerid="scroll-target"class="overflow-y-auto"style="max-height: 400px"><v-rowalign="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-btnappend-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>