vue 获取屏幕滚动条位置

在Vue中，你可以通过监听`window`对象的`scroll`事件来获取屏幕滚动条的位置。下面是一个示例代码：

<template>
  <div>
    <p>滚动条位置: {{ scrollTop }}</p>
    <div class="content" @scroll="handleScroll">
      <!-- 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    };
  },
  methods: {
    handleScroll() {
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style>
.content {
  height: 1000px;  /* 假设有足够长的内容 */
  overflow-y: scroll;
}
</style>

在上述代码中，我们使用`scrollTop`来保存滚动条的位置。在`handleScroll`方法中，我们通过`window.pageYOffset`、`document.documentElement.scrollTop`和`document.body.scrollTop`来获取滚动条位置，因为在不同的浏览器中可能会有不同的属性名。

在`mounted`钩子中，我们将`handleScroll`方法添加为`scroll`事件的监听器。在`beforeDestroy`钩子中，我们移除了对`scroll`事件的监听器，以防止内存泄漏。