vue，在滚动事件中，获取页面滚动高度

在Vue中获取页面滚动高度可以使用以下代码：

data() {
  return {
    scrollY: 0
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    this.scrollY = window.scrollY
  }
}

在上述代码中，我们定义了一个 `scrollY` 变量用于存储页面滚动高度，然后在 `mounted` 钩子函数中添加了一个滚动事件监听器，当页面滚动时，调用 `handleScroll` 方法来更新 `scrollY` 变量的值，最终就可以通过访问 `scrollY` 变量来获取页面滚动高度。

相关问题

vue，在滚动事件中，获取页面滚动高度的方法

在Vue中获取页面滚动高度的方法，可以通过监听滚动事件，然后获取window对象的scrollTop属性来实现。具体代码如下：

1. 在模板中添加滚动事件监听器：

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <!-- 页面内容 -->
  </div>
</template>

2. 在组件中定义handleScroll方法，通过window对象的scrollTop属性获取滚动高度：

export default {
  methods: {
    handleScroll(event) {
      // 获取滚动高度
      const scrollTop = event.target.scrollTop || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
    }
  }
}

上述代码中，event.target.scrollTop获取滚动容器的滚动高度，document.documentElement.scrollTop获取文档的滚动高度，document.body.scrollTop获取body元素的滚动高度。三者取其一即可。

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`。