如何在 VueJS 组件中监听窗口滚动事件？

Question

我想在我的 Vue 组件中收听窗口滚动事件。这是我到目前为止所尝试的：

 <my-component v-on:scroll="scrollFunction">
    ...
</my-component>

在我的组件方法中定义了 scrollFunction(event) 但它似乎不起作用。

任何人都知道如何做到这一点？

谢谢！

原文由 jeerbl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

其实我找到了解决办法。我在创建组件时在 scroll 事件上添加一个事件侦听器，并在组件被销毁时删除事件侦听器。

 export default {
  created () {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll (event) {
      // Any code to be executed when the window is scrolled
    }
  }
}

希望这可以帮助！

原文由 jeerbl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据我的经验，在滚动上使用事件侦听器会由于管道进入该事件流而产生大量噪音，如果您正在执行庞大的 handleScroll 函数，这可能会导致性能问题。

我经常在评分最高的答案中使用此处显示的技术，但我在其上添加了去抖动，通常大约 100ms 产生良好的性能与 UX 比率。

这是一个使用添加了 Lodash debounce 的顶级答案的示例：

 import debounce from 'lodash/debounce';

export default {
  methods: {
    handleScroll(event) {
      // Any code to be executed when the window is scrolled
      this.isUserScrolling = (window.scrollY > 0);
      console.log('calling handleScroll');
    }
  },

  mounted() {
    this.handleDebouncedScroll = debounce(this.handleScroll, 100);
    window.addEventListener('scroll', this.handleDebouncedScroll);
  },

  beforeDestroy() {
    // I switched the example from `destroyed` to `beforeDestroy`
    // to exercise your mind a bit. This lifecycle method works too.
    window.removeEventListener('scroll', this.handleDebouncedScroll);
  }
}

尝试将 100 的值更改为 0 和 1000 这样您就可以看到 handleScroll 的方式/时间不同

奖励：您还可以使用 vue-scroll 类的库以更简洁和可重用的方式完成此操作。如果您还没有看过 Vue 中的自定义指令，这是一个很好的用例。查看 https://github.com/wangpin34/vue-scroll 。

这也是 Sarah Drasner 在 Vue 文档中的一个很棒的教程： https ://v2.vuejs.org/v2/cookbook/creating-custom-scroll-directives.html

对于 Vue 3 用户

在 vue3 中，您应该使用 unmounted 或 beforeUnmount，而不是 beforeDestroy 。

Vue3 中未发出生命周期钩子 beforeDestroy

原文由 agm1984 发布，翻译遵循 CC BY-SA 4.0 许可协议