trigger functions based on elements' positions, based on viewport
$ npm install vue-waypoint --save-dev
import Vue from 'vue'
import VueWaypoint from 'vue-waypoint'
// Waypoint plugin
Vue.use(VueWaypoint)
VueWaypoint is a directive named v-waypoint
<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] // [0.25, 0.75] if you want a 25% offset!
} // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
})
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!')
}
}
}
}
-
active [boolean]
: set this parameter as you wish, changing dynamically the waypoint status (it removes and adds the waypoint physically) -
callback [function]
: every time the waypoint triggers this function will be called with aWaypoint
object as parameter -
options [object]
: you can leave thisundefined
or follow IntersectionObserver API (options)
Each callback call comes with a Waypoint
object defined as follows:
{
el: Node,
going: String,
direction: String,
_entry: IntersectionObserverEntry
}
You can map going
and direction
with the following global map, callable in every Vue's Component:
this.$waypointMap
Then you can compare map's elements with the callback's parameters:
if (direction === this.$waypointMap.DIRECTION_TOP) {}
-
VueWaypoint.addObserver (Element el, function callback, Object options)
-
VueWaypoint.removeObserver (Element el, function callback)
-
VueWaypoint.map
You are encouraged to use v-waypoint
directive since it follows the Vue's flow, anyway you can progammatically add new waypoints as you like, even outside Vue's context.
This can be accomplished with addObserver
and removeObserver
.
You can call them inside Vue's components with this.$addObserver
and this.$removeObserver
.
They are also available as standalone-plugin, just go with VueWaypoint.addObserver
and VueWaypoint.removeObserver
.
Waypoint first trigger is on page load, this means it actually triggers its own callback
with direction = undefined
(yes, we can't determine direction if no scroll has been made by the user)
You have to make certain changes when using vue-waypoint in a nuxt application mainly because it is designed for client side. Otherwise this could cause errors due to references to the window
object.
$ npm install vue-waypoint --save
Create new file under plugins
folder and name it v-waypoint.client.js
(.client
suffix is required so it will be used only in the browser - see here)
import Vue from "vue"
import VueWaypoint from "vue-waypoint"
Vue.use(VueWaypoint)
...
plugins: [
...
"~/plugins/v-waypoint.client.js"
],
...
This will make sure v-waypoint
is rendered and used only in client side.
<no-ssr>
<v-waypoint @waypoint="loadMore"></v-waypoint>
</no-ssr>