Vue不检测滚动事件

Question

我正在尝试在我的vue应用程序上使用aos库。显然它没有检测到滚动事件，因为它只显示屏幕上的元素而不是滚动后的其他元素。

所以我认为我可以添加一个窗口滚动事件监听器来刷新AOS功能，但似乎它没有激活该功能。

我尝试了一些方法：

1. 在组件的挂载方法中添加侦听器：

  mounted () {
    window.addEventListener('scroll', function() {
      console.log('Scrolling')
    });
  }

2. 在容器元素中添加侦听器。这个可以工作，但根本不工作，它不会像预期的那样不断激发，所以我必须多次滚动才能触发一次：

<template>
  <div class="page" @scroll="scrollFunction">
    Content...
  </div>
</template>
<script>
  ...
  methods: {
    scrollFunction() {
      console.log('scrolling from method')
    }
  }
</script>

3. 在创建和销毁的函数中添加窗口滚动侦听器（我在另一篇文章中看到这个，但对我不起作用）：

  created () {
    window.addEventListener('scroll', this.scrollFunction);
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollFunction);
  }

4. 从App.vue添加窗口滚动侦听器在已创建的函数上。

Answer 1

第一个似乎对我有用（下面）你可以提供其余的代码吗？

codesandbox