vue3监听浏览器滚动事件

在Vue3中，监听浏览器滚动事件通常会通过`@wheel`、`@window.wheel`或`@window.scroll`这样的自定义事件处理程序来实现。以下是简单的步骤：

1. 首先，在你的组件模板上绑定这个事件：

<div @wheel="handleScroll"></div>

或者如果想要监听整个窗口的滚动，可以使用`:key`绑定到window元素上：

<template>
  <div v-if="$root.$el">
    <div @wheel="handleScroll" :key="Math.random()"> <!-- 这里是你的其他内容 -->
      ... ...
    </div>
  </div>
</template>

2. 然后，在组件的methods中定义滚动事件处理器 `handleScroll`：

export default {
  methods: {
    handleScroll(e) {
      // e在这里是事件对象，包含了滚动相关的详细信息
      const { deltaY } = e; // 如果是滚动条滚动，deltaY表示垂直方向的滚动距离
      // 在这里编写你的滚动处理逻辑
    }
  }
}

注意：由于Vue3的特性，建议使用Composition API或setup函数来组织组件的逻辑。如果你使用的是setup，那么可以这样写：

import { onMounted, defineEmits } from 'vue';

const emit = defineEmits(['scroll']);

onMounted(() => {
  window.addEventListener('wheel', (e) => {
    emit('scroll', e);
  });
});

// 在需要的地方使用$emit('scroll', e)触发滚动事件