How to Easily Handle the onScroll Event in Vue

To handle the onScroll event on a Vue element, assign a function to the scroll event of the element and use the event object the function receives to perform an action. The action will occur whenever the user scrolls up or down on the page.

For example:

App.vueCopied!

<template>
  <div id="app">
    Scroll top: <b>{{ scrollTop }}</b>
    <br />
    <br />
    <div
      id="box"
      @scroll="handleScroll"
    >
      <p
        v-for="i in 10"
        :key="i"
      >
        Content
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  methods: {
    handleScroll(event) {
      this.scrollTop = event.currentTarget.scrollTop;
    },
  },
};
</script>

<style scoped>
#box {
  border: 1px solid black;
  width: 400px;
  height: 200px;
  overflow: auto;
}
</style>

We use the @ character to set a listener for an event on the component.

VueCopied!

<div
  id="box"
  @scroll="handleScroll"
>
  <!-- ... -->
</div>

The @ character is a shorter alternative to v-on:

VueCopied!

<div
  id="box"
  v-on:scroll="handleScroll"
>
  <!-- ... -->
</div>

The function (event handler) passed to the scroll event is invoked whenever the viewport is scrolled. It is called with an event object, which you can use to perform actions and access information related to the scroll event.

The currentTarget property of this event object returns the element that the scroll listener was attached to.

Apart from detecting scroll events, we can also scroll to the element in Vue.js.

Tip: If you’re not sure of when to use the event object’s currentTarget or target properties, this article might help: Event target vs currentTarget in JavaScript: The Important Difference.

We use the element’s scrollTop property to get how far the element’s scrollbar is from its topmost position. Then we update the state variable with the new value, and this reflects on the page.

Handle onScroll event on window object

We can also handle the onScroll event on the global window object, to perform an action when the viewport is scrolled.

The addEventListener() method lets us do this:

JavaScriptCopied!

<template>
  <div id="app">
    Scroll top: <b>{{ scrollTop }}</b>
    <br />
    <br />
    <div id="label">Scroll top: {{ scrollTop }}</div>
    <div>
      <p
        v-for="i in 30"
        :key="i"
      >
        Content
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  methods: {
    handleScroll() {
      this.scrollTop = window.scrollY;
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
};
</script>

<style scoped>
#label {
  position: fixed;
  padding: 10px 0;
  top: 0;
  background-color: white;
  border-bottom: 1px solid #c0c0c0;
  width: 100%;
}
</style>

The addEventListener() method takes up to two arguments:

1. type: a string representing the event type to listen for, e.g., 'click', 'keydown', 'scroll', etc.
2. listener: the function called when the event fires.

It also has some optional parameters, which you can learn more about here.

We call addEventListener() in the mounted hook to register the listener once the component renders as the page loads. mounted is only called for a component when it has been added to the DOM, so the listener will not be registered multiple times.

We also called the removeEventListener() method to unregister the event listener and prevent a memory leak. We place the call in the beforeUnmount hook so that it happens just before the component is removed from the DOM.

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.