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.
Install the utility using npm:
npm install @frankhoodbs/scroll-progress-helper
import useScrollProgressHelper from '@frankhoodbs/scroll-progress-helper';
const { progress } = useScrollProgressHelper({
startElement: HTMLNodeOrRef, /* your start element reference */
endElement: HTMLNodeOrRef, /* your end element reference */
// Additional configuration options if needed
});
// Reactively access the scroll progress as a computed property
console.log(progress.value); // Current scroll progress as a percentage (0 to 100)
Option | Description | Default Value |
---|---|---|
scroller |
The element used as the scroll container. | window |
startElement |
The reference to the starting element for scroll tracking. | - |
startTriggerPoint |
The trigger point within the starting element ('start' or 'end'). | 'start' |
endElement |
The reference to the ending element for scroll tracking. | - |
endTriggerPoint |
The trigger point within the ending element ('start' or 'end'). | 'end' |
scrollerIntersectionPoint |
Percentage of the scroller height used to determine intersection. | 50 |
<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>