vue-waypoint-morr-fork
v4.0.1
Published
> trigger functions and events based on the element position on the screen
Downloads
2
Readme
VueWaypoint
trigger functions and events based on the element position on the screen
Vue2 and Nuxt version
vue-waypoint for Vue2 repository
Demo
Open your browser console and see what's going on while scrolling up and down
Features
- [x] Vue 3
- [x] No dependencies
- [x] Flexible
- [x] Typescript
- [x] Battle tested
- [x] Customizable
- [x] Solid project (3+ years)
Getting started
npm
npm i vue-waypoint
Vue component
<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>
Props
active
- [x] Can use a reactive variable
- [x] Can set
true
/false
dinamically
Usage:
- Enable the waypoint:
<Waypoint :active="true" />
- Disable the waypoint:
<Waypoint :active="false" />
options
- [x] Useful for inner div detection
- [x] Trigger
change
event a portion of the element is completely on screen - [x] Is an official IntersectionObserverInit implementation
Usage:
- Set a custom
IntersectionObserver
options:<Waypoint :options="options" />
- Read what you can do with
options
: IntersectionObserverInit docs
Options example:
const options: IntersectionObserverInit = {
root: document,
rootMargin: '0px 0px 0px 0px',
threshold: [0.25, 0.75]
};
tag
[x] Set your preferred tag for the element
[x] 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>
CSS helpers
- [x] Zero configuration needed
- [x] Useful for simple CSS animations
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 changes
Examples:
<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 up
Events
change
Emitted every time the waypoint detects a change.
<template>
<Waypoint @change="onChange" />
</template>
const changeFunction = (waypointState) => {..}
WaypointState {
el: Element,
going: 'IN' | 'OUT';
direction: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
};
Development
- Fork the repository
- Run the project (
npm i && npm run serve
) - Follow Conventional Commits spec for your commits
- Open a pull request