V-Intersect
Detect when element is visible or hidden on user viewport
Demo
Installation
NPM
npm install v-intersect --save
Yarn
yarn add v-intersect
Install the plugin into your Vue project:
Vue
or use the component and directive directly:
VueVue
Usage
Directive
...
The function will be called when the visibility of the element is changes.
{ thisisVisible = observerisIntersecting console}
isIntersecting
: when it'strue
it means the element is visible on the screen, andfalse
means it's hiddenentries
: IntersectionObserverEntry
And if you want the function only called when element is visible you can use .enter
modifier.
...
Options
For more details IntersectionObserver Options
Once
It will called the function once when the element is visible
Disabling the observer
Component
...
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.