Functionality
State
Use the v-slot directive to access the isIntersecting state.
<template>
<HumbleScroll v-slot="{ isIntersecting }">
<div
class="flex flex-col items-start justify-between px-8 py-8 transition-all duration-300 rounded-lg"
:class="[isIntersecting ? 'bg-green-500 text-slate-800' : 'text-white bg-slate-800']"
>
<p class="text-2xl">{{ isIntersecting ? 'Intersecting' : 'Not intersecting' }}</p>
</div>
</HumbleScroll>
</template>
Emits
Use the @intersecting event to access the isIntersecting state.
<template>
<HumbleScroll @intersecting="alert('Hello World')">
<p>Run your functionality when in screen</p>
</HumbleScroll>
</template>