vue3监听滚轮高度

要在Vue3中监听滚轮高度，你可以使用mounted钩子函数和window的scroll事件来实现。下面是一个示例代码：

data() {
  return {
    scrollHeight: 0
  };
},
mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    this.scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
  }
}

在这个示例中，我们通过在data中定义一个scrollHeight属性来保存滚轮的高度。在mounted钩子函数中，我们添加了一个scroll事件监听器，并将事件处理函数设置为handleScroll。在handleScroll函数中，我们使用`document.documentElement.scrollTop || document.body.scrollTop`来获取滚轮的高度，并将其赋值给scrollHeight属性。

这样，每当用户滚动页面时，handleScroll函数将被触发，scrollHeight属性将被更新为当前滚轮的高度。你可以在模板中使用这个属性来实现你需要的逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3监听滚轮高度事件](https://blog.csdn.net/m0_72196169/article/details/129771890)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [VUE3 实时监听页面滚动高度 ，改变nav/title的 透明度](https://blog.csdn.net/Eternity_matt/article/details/121064416)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue 解除鼠标的监听事件的方法](https://download.csdn.net/download/weixin_38749268/12932141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]