Vue 没有检测到滚动事件答案

【问题标题】：Vue doesn't detect scroll eventVue 没有检测到滚动事件
【发布时间】：2019-09-02 05:33:23
【问题描述】：

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

所以我认为我可以添加一个窗口滚动事件侦听器来刷新 AOS 功能，但似乎它不会触发该功能。

我尝试了一些方法：

在组件的mounted方法中添加监听：

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

在容器元素中添加监听器。这个有效，但根本没有，它不会像预期的那样持续触发，所以我必须滚动多次才能触发一次：

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

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

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

在 App.vue 中创建的函数上添加窗口滚动监听器。

【问题讨论】：

标签： vue.js

【解决方案1】：

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

codesandbox

【讨论】：

我将 .page 的位置属性从绝对更改为相对，现在可以使用了。