Vuejs directive to detect when an element appears into the viewport using the intersection observer api
Via npm:
npm install vue-is-intersecting
Via yarn:
yarn add vue-is-intersecting
import Vue from "vue";
import IsIntersecting from "vue-is-intersecting";
Vue.use(IsIntersecting);
pass the method that you want to use as a callback when the html element appears in the viewport
NB: by default the callback is debounced after 500ms that the element bind appears in the viewport, to execute the callback immediately use the instant modifier.
<div v-is-intersecting[myData]="myMethod">Hello</div>
unique modifier executes the callback only once
<div v-is-intersecting.unique="myMethod">Hello</div>
instant modifier executes the callback immediately, no debounce
<div v-is-intersecting.instant="myMethod">Hello</div>
current modifier executes two different callbacks when the element appears or disappears in the viewport
<div v-is-intersecting.current="[enterMethod, exitMethod]">Hello</div>