Trigger A Function When You Scroll To An Element – VueWaypoint

Install & Download:

# Yarn
$ yarn add vue-waypoint
# NPM
$ npm i vue-waypoint --save

Description:

A simple Vue.js direction that keeps track of scroll event and trigger functions when you scroll to specific elements.

Basic usage:

1. Import the VueWaypoint after Vue.

import Vue from 'vue'
import VueWaypoint from 'vue-waypoint'

2. Register the plugin.

Vue.use(VueWaypoint)

3. Basic usage:

<template>
  <div v-waypoint="{ active: true, callback: onWaypoint, options: intersectionOptions }"></div>
</template>

export default {
  data: () => ({
    intersectionOptions: {
      root: null,
      rootMargin: '0px 0px 0px 0px',
      threshold: [0, 1] 
    } 
  })
  methods: {
    onWaypoint ({ going, direction }) {
      // going: in, out
      // direction: top, right, bottom, left
      if (going === this.$waypointMap.GOING_IN) {
        console.log('waypoint going in!')
      }
      if (direction === this.$waypointMap.DIRECTION_TOP) {
        console.log('waypoint going top!')
      }
    }
  }
}

Preview:

Changelog:

v4.2.6 (08/28/2022)

• badded support for SSR environments

v4.2.5 (09/12/2022)

• bugfixes

v4.2.3 (08/13/2022)

• bugfixes

v4.2.1 (09/07/2021)

• enable inner slots

v4.2.0 (08/17/2021)

• disableCssHelpers

v4.1.1 (08/10/2021)

• update

v4.1.0 (07/09/2021)

• adds el as example

v4.0.0 (06/21/2021)

• feat: vue3 support