Package Exports

vue-is-intersecting

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-is-intersecting) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Intersect Directive

Vuejs directive to detect when an element enters into the viewport

view demo

Installation

Via npm:

npm install vue-is-intersecting

Via yarn:

yarn add vue-is-intersecting

Import

import Vue from "vue";
import IsIntersecting from "vue-is-intersecting";

Vue.use(IsIntersecting);

Usage

CSS Binding

pass data through the modifiers NB: by default the callback is debounced after 500ms that the binding item enters the viewport, to fire the callback immediately use the instant modifier

<div v-is-intersecting[myData]="myMethod">Hello</div>

unique modifier fires the callback only once

<div v-is-intersecting.unique="myMethod">Hello</div>

instant modifier fires the callback immediately, no debounce

<div v-is-intersecting.instant="myMethod">Hello</div>

curret modifier fires triggers 2 different callbacks when the element enters or exit the viewport

<div v-is-intersecting.current="[enterMethod, exitMethod]">Hello</div>