A simple way to trigger functions on page/element scroll using Vue.js – vue-waypoint


Category: Vue.js Vue.js Others | August 11, 2021
Author: scaccogatto
Official Page: Go to website
Last Update: August 11, 2021
License: MIT

vue-trigger function on page scroll

Description:

In some part of your project, you might need to trigger functions on page or element scroll using Vue.js code. To make this happen, either you will create the code from scratch or simply use vue-waypoint component. In my opinion, using existing components will reduce your development time.

Features:

  • Compatible with Vue 3
  • No dependencies
  • Flexible
  • Typescript
  • Battle tested
  • Customizable

How to use it?

1. Install the component with npm.

npm i vue-waypoint

2. Import the required components.

import { defineComponent } from "vue";
import { VueWaypoint } from 'vue-waypoint'

3. code usage.

export default defineComponent({
  name: "SomeComponent",
  components: {
    Waypoint
  },
  setup() {
    const onChange = (waypointState) => {
      // Going can be:
      // IN
      // OUT
      console.log(waypointState.going);

      // Direction can be:
      // UP
      // DOWN
      // LEFT
      // RIGHT
      console.log(waypointState.direction);
    }

    return { onChange };
  }
});

4. Add component in your template file.

<template>
  <Waypoint @change="onChange" />
</template>

Thanks for reading. 🙂