vue项目中监听页面滚动事件

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

<script>
export default {
  methods: {
    handleScroll(event) {
      // 在滚动时执行的操作
      console.log("页面滚动事件被触发了", event);
    }
  }
}
</script>

需要注意的是，默认情况下，只有设置了 overflow: auto 或者 overflow: scroll 的元素才会触发滚动事件。如果你想要监听整个页面的滚动事件，你可以将监听器绑定到 window 对象上，如下所示：

html
<template>
  <!-- 页面内容 -->
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll(event) {
      // 在滚动时执行的操作
      console.log("页面滚动事件被触发了", event);
    }
  }
}
</script>