vue3全局滚动条静止时隐藏

在 Vue3 中，如果你想要实现页面滚动到顶部或底部时自动隐藏滚动条，可以使用 `v-if` 或者 `v-show` 组件属性配合计算属性来控制滚动条的显示。以下是一个简单的示例：

1. 首先，在模板中，给 body 元素添加一个 ref 变量，如 `@ref="scrollRef"`，用于获取滚动元素：

<template>
  <div ref="scrollRef">
    <!-- 正文内容 -->
  </div>
</template>

2. 然后，在组件的 script 中创建一个计算属性，当滚动到底部或顶部时返回 false 来隐藏滚动条：

<script setup>
import { ref } from 'vue';

const scrollRef = ref(null);
const isScrollHidden = computed(() => {
  const scrollTop = scrollRef.value.scrollTop;
  const scrollHeight = scrollRef.value.scrollHeight;
  return (scrollTop + window.innerHeight) >= scrollHeight || scrollTop <= 0; // 判断是否在可视区域之外
});
</script>

3. 在样式部分，基于计算属性 `isScrollHidden` 来设置滚动条的样式：

<style scoped>
body[is-scroll-hidden]::-webkit-scrollbar { /* 针对 WebKit 内核 */
  display: none;
}

body[is-scroll-hidden] {
  scrollbar-width: none; /* Firefox 和 Edge */
}
</style>

现在，当你滚动到底部或顶部时，滚动条会自动隐藏。请注意，这只是一个基础示例，实际应用可能需要处理更多的边界情况和兼容性问题。