How to listen to the window scroll event in a VueJS component?

Listening for window scroll events in VueJS can be achieved in multiple ways. One common implementation is as follows:

Step 1: Add an Event Listener in the mounted Hook

First, add an event listener in the mounted lifecycle hook of the component to listen for the window's scroll event. This ensures that the event listener is properly set up when the component is mounted to the DOM.

javascript
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // Handle scroll event logic
      console.log('Window is scrolling!');
    }
  }
}

Step 2: Remove the Event Listener in the beforeDestroy Hook

To prevent memory leaks and other potential performance issues, it is crucial to remove the event listener before the component is destroyed. This can be done by calling removeEventListener in the beforeDestroy lifecycle hook.

javascript
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // Handle scroll event logic
      console.log('Window is scrolling!');
    }
  }
}

Example Application

Suppose we have a navigation bar component, and we want to change its style after the user scrolls down a certain distance. We can use the above technique to achieve this functionality:

javascript
export default {
  data() {
    return {
      hasScrolled: false
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > 100) {
        this.hasScrolled = true;
      } else {
        this.hasScrolled = false;
      }
    }
  }
}

In this example, when the page scrolls down more than 100 pixels, the hasScrolled data property is set to true, which can be used to change the navigation bar's style, such as adding a class or altering its color.

The advantage of this method is that it provides precise control over the response to scroll events and safely adds and removes event listeners within the component's lifecycle.