Trigger Functions When You Scroll To An Element | VueWaypoint

VueWaypoint is a simple Vue.js trend that tracks scroll events and runs functions when scrolling to specific element positions on the screen.

jquery scroll to element, jquery trigger event when scroll to div, on scroll down jquery, vertical scroll event javascript, window scroll jquery, jquery scroll to div, javascript on scroll down

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-waypoint

# NPM
$ npm i vue-waypoint --save

1. Import VueWaypoint after Vue.

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

2. Register the plugin.

Vue.use(VueWaypoint)

3. Primary use:

<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!')
      }
    }
  }
}

Trigger A Function When You Scroll To An Element, VueWaypoint Plugin/Github, add scroll event listener to div

See Demo And Download

Official Website(scaccogatto): Click Here

This superior jQuery/javascript plugin is developed by scaccogatto. For extra Advanced Usages, please go to the official website.