@frankhoodbs/scroll-progress-helper v2.0.2

Scroll Progress Helper

Scroll Progress Helper is a utility for Vue 3 applications that provides a composable function to calculate and track the scroll progress between specified elements. It allows you to monitor the user's scroll position and integrate dynamic behaviors based on the scroll progress within your Vue components.

Installation

Install the utility using npm:

npm install @frankhoodbs/scroll-progress-helper

Usage

Import the utility in your Vue component:

import useScrollProgressHelper from '@frankhoodbs/scroll-progress-helper';

Use the utility within your component:

const { progress } = useScrollProgressHelper({
  startElement: HTMLNodeOrRef, /* your start element reference */
  endElement: HTMLNodeOrRef, /* your end element reference */
  // Additional configuration options if needed
});

Access the scroll progress:

// Reactively access the scroll progress as a computed property
console.log(progress.value); // Current scroll progress as a percentage (0 to 100)

Configuration Options

Example

<template>
    <div class="App">
        <div ref="$start">...</div>
        <div ref="$end">...</div>
        <progress class="progress" :value="progress" max="100">{{ progress }}%</progress>
    </div>
</template>

<script setup lang="ts">
import useScrollProgressHelper from '@frankhoodbs/scroll-progress-helper';
import { ref } from 'vue';

const $start = ref<HTMLElement | null>(null);
const $end = ref<HTMLElement | null>(null);

const { progress } = useScrollProgressHelper({
  startElement: $start,
  endElement: $end,
});
</script>