trigger functions and events based on the element position on the screen
trigger functions and events based on the element position on the screen
Open your browser console and see what's going on while scrolling up and down
npm i vue-waypoint
<template>
<Waypoint @change="onChange">
<!-- anything you want here -->
</Waypoint>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Waypoint } 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
dynamicallyUsage:
<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 docs
Options 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 --> <span class="waypoint"></span>
Waypoint as p: <Waypoint :tag="'p'" /> --> renders --> <p class="waypoint"></p>
disableCssHelpers
false
Usage:
<Waypoint :disableCssHelpers="false" />
<Waypoint :disableCssHelpers="true" />
DOM result:
<Waypoint /> --> renders --> <div class="waypoint going-in direction-down"></div>
<Waypoint :disableCssHelpers="true" /> --> renders --> <div></div>
The component comes with three classes:
waypoint
: set when the waypoint is readygoing-in
, going-out
: dynamically changed when the waypoint comes in and outdirection-up
, direction-down
, direction-left
, direction-right
: dynamically 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>
function onChange(waypointState) {
/* ... */
}
interface WaypointState {
el: Element;
going: "IN" | "OUT";
direction: "UP" | "DOWN" | "LEFT" | "RIGHT";
}
npm i && npm run dev
)