From my own experience, implementing an event listener on scroll can result in a lot of excess activity being fed into the event stream, potentially causing performance issues especially when dealing with a hefty handleScroll function.

I frequently utilize the method demonstrated in the top-rated answer, but I also incorporate debounce functionality on top of it, typically setting it to around 100ms for optimal balance between performance and user experience.

Here's an example showcasing the highest rated solution with Lodash debounce integrated:

import debounce from 'lodash/debounce';

export default {
  methods: {
    handleScroll(event) {
      // Implement any necessary code upon scrolling
      this.isUserScrolling = (window.scrollY > 0);
      console.log('calling handleScroll');
    }
  },

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

  beforeDestroy() {
    // I changed from `destroyed` to `beforeDestroy` to provide a different perspective. Both lifecycle methods are effective.
    window.removeEventListener('scroll', this.handleDebouncedScroll);
  }
}

Experiment by altering the value of 100 to 0 and 1000 to observe the variations in how/when handleScroll is triggered.

EXTRA: For a more concise and reusable approach, consider leveraging a library like vue-scroll. This presents an excellent opportunity to delve into custom directives within Vue if you haven't explored them yet. Check out https://github.com/wangpin34/vue-scroll.

This helpful guide by Sarah Drasner in the Vue documentation delves into creating custom scroll directives: https://v2.vuejs.org/v2/cookbook/creating-custom-scroll-directives.html

For Vue 3 Enthusiasts

In Vue 3, opt for unmounted or beforeUnmount instead of beforeDestroy.

Lifecycle hook beforeDestroy is not emitted in Vue3

Experience the seamless integration of Vue custom components.

 <MyCustomComponent nativeOnScroll={this.handleScroll}>

or

<my-component v-on:scroll.native="handleScroll">

Simply create a method for handleScroll. It's that simple!

I have found myself needing this feature multiple times, which is why I created a custom mixin for it. It can be easily implemented as shown below:

import windowScrollPosition from 'path/to/mixin.js'

new Vue({
  mixins: [ windowScrollPosition('position') ]
})

This mixin adds a reactive position property to the Vue instance, which contains the window scroll position in an [x,y] array.

Feel free to experiment with the functionality using this CodeSandbox demo.

Below is the code for the mixin, accompanied by detailed comments explaining its functionality:

function windowScrollPosition(propertyName) {
  return {
    data() {
      return {
        // Initializing scroll position at [0, 0]
        [propertyName]: [0, 0]
      }
    },
    created() {
      // This code only runs on the client side, with server side sticking to [0, 0]
      if (!this.$isServer) {
        this._scrollListener = () => {
          // Using window.pageX/YOffset instead of scrollX/Y for cross-browser compatibility
          // Rounding values to handle subpixel inconsistencies on high-DPI devices
          this[propertyName] = [
            Math.round(window.pageXOffset),
            Math.round(window.pageYOffset)
          ]
        }

        // Calling listener once to determine initial position
        this._scrollListener()

        // Listening for scroll events to update position
        window.addEventListener('scroll', this._scrollListener)
      }
    },
    beforeDestroy() {
      // Removing event listener when component is destroyed
      window.removeEventListener('scroll', this._scrollListener)
    }
  }
}

In my opinion, the most effective method is to simply include ".passive"

v-on:scroll.passive='handleScroll'

While this question may be old, I have discovered a more effective solution utilizing Vue.js 2.0+ Custom Directives. In order to also bind the scroll event, I implemented the following approach:

To begin, with the use of @vue/cli, incorporate the custom directive within src/main.js (prior to initializing the Vue.js instance) or in any other suitable location:

Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f);
      }
    }
    window.addEventListener('scroll', f);
  }
});

Next, apply the custom v-scroll directive to the desired element or component, ensuring that you include a designated method such as handleScroll:

<my-component v-scroll="handleScroll"></my-component>

Finally, incorporate your method within the component:

methods: {
  handleScroll: function() {
    // add your logic here
  }
}

It is worth noting that there is no need to concern yourself with the Vue.js lifecycle, as the custom directive itself handles these aspects.

Do you think this approach could work? It's specifically designed for Vue 3.

setup() {
    function handleScrollEvent(event) {
      window.removeEventListener("scroll", handleScrollEvent);
      console.log("Stop listening to scroll event");
      // Add your custom code here...
      setTimeout(() => {
        window.addEventListener("scroll", handleScrollEvent, { passive: true });
        console.log("Start listening to scroll event again");
      }, 500);
    }

    window.addEventListener("scroll", handleScrollEvent, { passive: true });
  }

The concept behind this solution is to capture the scroll event only once, execute your script, and then reattach the scroll listener with a delay using the setTimeout function. If the page continues scrolling after the delay, the scroll event will be handled again. Essentially, the scroll event is only monitored once every 500ms (in this example).

I utilize this technique to dynamically adjust a button's position by adding a CSS class during scrolling.

This method does not automatically refresh your component, but I found a solution by utilizing the Vux library to create a module for Vuex called "page".

export const state = {
    currentScrollY: 0,
};

export const getters = {
    currentScrollY: s => s.currentScrollY
};

export const actions = {
    setCurrentScrollY ({ commit }, y) {
        commit('setCurrentScrollY', {y});
    },
};

export const mutations = {
    setCurrentScrollY (s, {y}) {
       s.currentScrollY = y;
    },
};

export default {
    state,
    getters,
    actions,
    mutations,
};

In App.vue :

created() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll () {
      this.$store.dispatch("page/setCurrentScrollY", window.scrollY);
      
    }
  },

In your component:

  computed: {
    currentScrollY() {
      return this.$store.getters["page/currentScrollY"];
    }
  },

  watch: {
    currentScrollY(val) {
      if (val > 100) {
        this.isVisibleStickyMenu = true;
      } else {
        this.isVisibleStickyMenu = false;
      }
    }
  },

And it works flawlessly.

Here is a demonstration of Vue3 using the <script setup> feature:

<template>
  <header :class="stickyHeader ? 'sticky' : ''" ></header>
<template>

<script setup>
import { ref, onBeforeMount } from 'vue'

onBeforeMount(() => {
  window.addEventListener('scroll', handleScroll)
})

const stickyHeader = ref(false)

function handleScroll(){
  if (window.pageYOffset) {
    stickyHeader.value = true
  } else {
    stickyHeader.value = false
  }
}

</script>

When working with Vue3, I found a solution by adding the listener in the beforeMount hook. It successfully worked for my case where I needed the listener to be triggered across the entire application.

beforeMount() {
    window.addEventListener('scroll', this.handleScroll)
},
methods: {
   handleScroll(){
     // Code logic goes here
  }
}

When using Vue, scrolling does not involve a window element. The way this would be implemented in your application is as follows:

mounted () {
    document.querySelector('.className').addEventListener('scroll', this.handleScroll);
},

methods: {
    handleScroll(e){
        console.log(this.scrollEl.scrollTop)
    }
},