简单的滚动事件不会在 Vue 组件中触发

Question

我是 Vue 新手，正在尝试设置最简单的滚动事件处理程序。由于某种原因，它根本没有发射。

在我的组件中，我有：

mounted () {
 window.addEventListener('scroll', this.runOnScroll);
},

methods: {
 runOnScroll () {
   console.log('scroll!');
 },
},

这太基本了，我不明白为什么 runOnScroll 没有触发！

Answer 1

确保您的窗口足够高，能够实际滚动。如果您只想监听用户何时使用鼠标滚轮，请wheel改为监听该事件。

const app = new Vue({
  el: "#app",

  mounted() {
    window.addEventListener('scroll', this.runOnScroll);
    window.addEventListener('wheel', this.runOnWheel);
  },

  methods: {
    runOnScroll() {
      console.log('scroll!');
    },
    runOnWheel() {
      console.log('wheel');
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
  <div>hello world!</div>
</div>