trigger functions and events based on the element position on the screen
vue-waypoint for Vue2 repository
Open your browser console and see what’s going on while scrolling up and down
npm i vue-waypoint
<template>
<Waypoint @change="onChange" />
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { VueWaypoint } from 'vue-waypoint'
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 };
}
});
</script>
active
true
/false
dinamicallyUsage:
<Waypoint :active="true" />
<Waypoint :active="false" />
options
change
event a portion of the element is completely on screenUsage:
IntersectionObserver
options: <Waypoint :options="options" />
options
: IntersectionObserverInit docsOptions example:
const options: IntersectionObserverInit = {
root: document,
rootMargin: '0px 0px 0px 0px',
threshold: [0.25, 0.75]
};
tag
Set your preferred tag for the element
Defaults to div
Waypoint as div: <Waypoint :tag="'div'" /> --> renders --> <div class="waypoint"></div>
Waypoint as span: <Waypoint :tag="'span'" /> --> renders --> <
Waypoint as p: <Waypoint :tag="'p'" /> --> renders --> <p class="waypoint"></p>
The component comes with three classes:
waypoint
: set when the waypoint is readygoing-in
, going-out
: dinamically changed when the waypoint comes in and outdirection-up
, direction-down
, direction-left
, direction-right
: dinamically changed when the direction changesExamples:
<Waypoint class="waypoint going-in direction-up" />
- the element is visible and came from bottom and is going top (natural scroll)<Waypoint class="waypoint going-in direction-down" />
- the element is visible and came from top and is going up (reverse natural scroll)<Waypoint class="waypoint going-out direction-up" />
- the element is not visible and came from bottom and is going top<Waypoint class="waypoint going-out direction-down" />
- the element is not visible and came from top and is going upchange
Emitted every time the waypoint detects a change.
<template>
<Waypoint @change="onChange" />
</template>
const changeFunction = (waypointState) => {..}
WaypointState {
going: 'IN' | 'OUT';
direction: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
};
npm i && npm run serve
)Author: scaccogatto
Download Link: Download The Source Code
Official Website: https://github.com/scaccogatto/vue-waypoint
License: MIT
#vue #vuejs