vue3获取不到当前页面滚动高度

在 Vue.js 3 中，如果你想要获取当前页面的滚动高度，通常会通过 `window` 对象的 `scrollY` 或者 `scrollTop` 属性来实现。但是，由于浏览器安全策略限制，直接访问滚动位置可能会因为同源策略而受限。

以下是一个简单的示例：

export default {
  data() {
    return {
      scrollHeight: null,
    };
  },
  mounted() {
    this.scrollHeight = window.scrollY; // 或者 window.scrollTop
    // 您还可以设置一个 watch 来监听滚动事件
    // watch: {
    //   $route(to) {
    //     this.scrollHeight = window.scrollY;
    //   }
    // },
  },
};

然而，如果在运行时遇到问题，可能是由于以下原因：

1. **权限问题**：如上所述，若是在组件未激活（mounted）之前尝试获取滚动高度，可能需要处理异步初始化。
2. **跨域或沙箱环境**：对于SPA应用部署到服务端渲染环境中，或在像 Vue CLI 的 ssr 配置下，可能需要额外的处理。
3. **异步请求**：如果滚动高度依赖于某个异步操作的结果，确保该操作完成后再更新 `scrollHeight`。

相关问题

使用vue3如何获取当前页面滚动条滚动了多少

在Vue3中，你可以使用`ref`和`watch`来监听窗口滚动事件，从而获取当前页面滚动条滚动了多少。以下是示例代码：

<template>
  <div>
    <p>页面已滚动 {{scrollTop}} 像素</p>
    <div style="height: 1000px;"></div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const scrollTop = ref(0)

    const handleScroll = () => {
      scrollTop.value = window.pageYOffset
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    return {
      scrollTop
    }
  }
}
</script>

在上面的例子中，我们使用`ref`函数来定义一个名为`scrollTop`的响应式变量，并将其初始值设为0。在`handleScroll`函数中，我们获取当前页面滚动条滚动了多少像素，并将其赋值给`scrollTop`变量。然后，我们使用`onMounted`和`onUnmounted`钩子来分别在组件挂载和卸载时添加和移除窗口滚动事件监听器。最后，我们将`scrollTop`变量返回给模板，以便在页面中显示当前滚动条滚动距离。

vue3 页面滚动到指定位置

在Vue3中，如果你想要实现页面滚动到某个特定的位置，通常会使用JavaScript的`scrollTo()`方法结合Vue的响应式特性。这里是一个简单的示例：

<template>
  <button @click="scrollToTop">Scroll to Top</button>
  <!-- ...你的内容... -->
</template>

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

const scrollTarget = ref(0); // 指定滚动目标的位置

function scrollToTop() {
  window.scrollTo({
    top: scrollTarget.value, // 设置滚动顶部
    behavior: 'smooth', // 可选参数，设置平滑滚动效果，默认为'default'
  });
}
</script>

在这个例子中，当你点击“Scroll to Top”按钮时，页面就会滚动到`scrollTarget`所指向的位置。你可以随时更新`scrollTarget`的值来改变滚动的目标。