vue3＜setup＞中判断当前视口距离顶部的距离

在 Vue 3 的 <script setup> 语法中，你可以使用 Composition API 来跟踪视口距离顶部的距离。你可以创建一个响应式的 ref 来存储这个距离，并在 onMounted 生命周期钩子中设置一个滚动事件监听器来更新这个值。下面是一个示例：

<template>  
  <div>  
    <!-- 你的组件内容 -->  
    <p>当前视口距离顶部的距离: {{ scrollTopDistance }}</p>  
  </div>  
</template>  
  
<script setup>  
import { ref, onMounted, onUnmounted } from 'vue';  
  
// 创建一个响应式的 ref 来存储视口距离顶部的距离  
const scrollTopDistance = ref(0);  
  
// 监听滚动事件来更新视口距离顶部的距离  
const updateScrollDistance = () => {  
  scrollTopDistance.value = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;  
};  
  
// 在组件挂载时添加滚动事件监听器  
onMounted(() => {  
  window.addEventListener('scroll', updateScrollDistance);  
  // 初始化时也获取一次距离  
  updateScrollDistance();  
});  
  
// 在组件卸载时移除滚动事件监听器  
onUnmounted(() => {  
  window.removeEventListener('scroll', updateScrollDistance);  
});  
</script>

在这个示例中：

• scrollTopDistance 是一个响应式的 ref，用于存储视口距离顶部的距离。
• updateScrollDistance 是一个函数，它获取当前视口距离顶部的距离，并更新 scrollTopDistance 的值。
• 在 onMounted 钩子中，我们添加了滚动事件的监听器，以便在每次滚动时调用 updateScrollDistance 函数。同时，我们立即调用 updateScrollDistance 来获取初始的滚动距离。
• 在 onUnmounted 钩子中，我们移除了滚动事件的监听器，以避免在组件卸载后仍然监听滚动事件，这有助于防止内存泄漏。

现在，scrollTopDistance 会在每次滚动时自动更新，并且你可以在模板中直接使用 {{ scrollTopDistance }} 来显示当前视口距离顶部的距离。由于 scrollTopDistance 是响应式的，所以当它的值改变时，Vue 会自动更新 DOM。