转载说明：原创不易，未经授权，谢绝任何形式的转载

有时候，我们想要在Vue.js组件中监听窗口滚动事件。 在这篇文章中，我们将会学习如何在Vue.js组件中监听窗口滚动事件。

在Vue.js组件中监听窗口滚动事件

我们可以调用window.addEventListener方法来监听浏览器窗口上的滚动事件，以此来在Vue.js组件中监听窗口滚动事件。

例如，我们可以写成这样：

<template>  <div id="app">    <p v-for="n of 100" :key="n">{{ n }}</p>  </div></template><script>export default {  name: "App",  created() {    window.addEventListener("scroll", this.handleScroll);  },  destroyed() {    window.removeEventListener("scroll", this.handleScroll);  },  methods: {    handleScroll(event) {      console.log(window.scrollY);    },  },};</script>

我们在created钩子中调用window.addEventListener方法并传递'scroll'参数来添加handleScroll滚动事件监听器，以便在组件挂载时监听滚动事件。 在destroyed钩子中，我们调用window.removeEventListener方法来移除handleScroll滚动事件监听器。 在handleScroll方法中，我们使用window.scrollY属性获取垂直滚动位置。 在模板中，我们有一些可滚动的内容。如果我们通过它滚动，应该看到记录了scrollY的值。结束

我们可以通过调用window.addEventListener方法来监听浏览器窗口的滚动事件，在Vue.js组件中监听窗口滚动事件。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。