v-intersect

Detect when element is visible or hidden on user viewport

Usage no npm install needed!

<script type="module">
  import vIntersect from 'https://cdn.skypack.dev/v-intersect';
</script>

README

V-Intersect

version

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.