我們在使用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>