Morioh
Login
Eldora Powlowski

Eldora Powlowski

3 years ago

A Vue Component to Execute a Function When You Scroll To An Element

VueWaypoint

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

Vue2 and Nuxt version

vue-waypoint for Vue2 repository

Demo

Simple demo page

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

Usage:

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

  • 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 ready
  • going-in, going-out: dinamically changed when the waypoint comes in and out
  • direction-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 {
  going: 'IN' | 'OUT';
  direction: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
};

Development

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

Download Details:

Author: scaccogatto
Download Link: Download The Source Code
Official Website: https://github.com/scaccogatto/vue-waypoint
License: MIT

#vue #vuejs

A Vue Component to Execute a Function When You Scroll To An Element
20.05 GEEK