Trigger A Function When You Scroll To An Element – VueWaypoint

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:

Trigger A Function When You Scroll To An Element - VueWaypoint

Download Details:

Author: scaccogatto

Live Demo: https://scaccogatto.github.io/vue-waypoint/

Download Link: https://github.com/scaccogatto/vue-waypoint/archive/master.zip

Official Website: https://github.com/scaccogatto/vue-waypoint

Install & Download:

# Yarn
$ yarn add vue-waypoint

# NPM
$ npm i vue-waypoint --save

You Might Be Interested In:

Add Comment