V-Intersect
Detect when element is visible or hidden on user viewport
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 element change.
onIntersect(observer){
this.isVisible = observer.isIntersecting
console.log(observer.entries)
}
isIntersecting
= type of this argument is boolean
and true
means the element is visible on the screen, and false
means it's hiddenentries
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 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
The IntersectionObserver API currently 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.