trigger functions and events based on the element position on the screen

Simple demo page

Open your browser console and see what's going on while scrolling up and down

• Vue 3
• No dependencies
• Flexible
• Typescript
• Battle tested
• Customizable
• Solid project (5+ years)
• Supports slots

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>

• Can use a reactive variable
• Can set true/false dynamically

Usage:

• Enable the waypoint: <Waypoint :active="true" />
• Disable the waypoint: <Waypoint :active="false" />

• Useful for inner div detection
• Trigger change event a portion of the element is completely on screen
• 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],
};

• 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>

• Disable automatic CSS classes on the Waypoint component
• Defaults to false

Usage:

• Enable helpers (default): <Waypoint :disableCssHelpers="false" />
• Disable helpers: <Waypoint :disableCssHelpers="true" />

DOM result:

• With CSS helpers: <Waypoint /> --> renders --> <div class="waypoint going-in direction-down"></div>
• Without CSS helpers: <Waypoint :disableCssHelpers="true" /> --> renders --> <div></div>

• Zero configuration needed
• Useful for simple CSS animations

The component comes with three classes:

• waypoint: set when the waypoint is ready
• going-in, going-out: dynamically changed when the waypoint comes in and out
• direction-up, direction-down, direction-left, direction-right: dynamically 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

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";
}

1. Fork the repository
2. Run the project (npm i && npm run dev)
3. Follow Conventional Commits spec for your commits
4. Open a pull request

vue-waypoint for Vue2 repository