V-Intersect

Detect when element is visible or hidden on user viewport

Demo

Demo

Installation

NPM

npm install v-intersect --save

Yarn

yarn add v-intersect

Install the plugin into your Vue project:

import Vue from 'vue'
import VIntersect from 'v-intersect'

Vue.use(VIntersect)

or use the component and directive directly:

import Vue from 'vue'
import { VIntersectComp, VIntersectDir } from 'v-intersect'

Vue.directive('intersect', VIntersectDir)
Vue.component('v-intersect', VIntersectComp)

Usage

Directive

<div class="content" v-intersect="onIntersect">...</div>

The function will be called when the visibility of the element is changes.

onIntersect(observer){
    this.isVisible = observer.isIntersecting
    console.log(observer.entries)
}

• isIntersecting: when it's true it means the element is visible on the screen, and false means it's hidden
• entries: IntersectionObserverEntry

And if you want the function only called when element is visible you can use .enter modifier.

<div class="content" v-intersect.enter="onIntersect">...</div>

Options

<div class="content" v-intersect="{
    callback: onIntersect,
    options: {
        root: ...,
        rootMargin: ...,
        threshold: ...
    }
}">
</div>

For more details IntersectionObserver Options

Once

It will called the function once when the element is visible

<div class="content" v-intersect="{
    callback: onIntersect,
    once: true
}" />

Disabling the observer

<div class="content" v-intersect="{
    callback: onIntersect,
    disabled: true
}" />

Component

<v-intersect @change="onIntersect">
    <div class="content">...</div>
</v-intersect>

Events

| Name | Description | |---|---| | change | event fired when visibility of the element change | | enter | event fired when the element is intersect (visible) on the screen| | once | event fired once when the elemnt is visible |

Props

| Name | Type | Default | Description | |---|---|---|---| | root | String | ' ' | MDN | | rootMargin | String | '0px' | MDN | | threshold | [Array, Number] | 0 | MDN| | disabled | Boolean | false | Disable the observer |

Note: for root prop, you need to pass the element class or id i.e .content or #content

Polyfill

This plugin uses The IntersectionObserver API, and currently it is not available in all browsers (IE11, Safari and iOS Safari). If you intend to support these browsers, you can include WICG IntersectionObserver Polyfill to your bundle.