Monitor if a component is inside the viewport, using IntersectionObserver API in Vue.
npm install vee-observevee-observe it's easier than ever to monitor elements
sh
yarn add vee-observe
`
or NPM:
`sh
npm install vee-observe --save
`
Usage
$3
`vue
Scroll down to see the image
:root="null"
:root-margin="'0px'"
:threshold="0"
:once="false"
@on-change="onChange"
@not-supported="notSupported"
>
`
API
$3
Provide these as the options argument as props on the component.
| Name | Type | Default | Description |
| ---------------| -----------------------------| ----------- | ----------- |
| root | Element | document | The Intersection Observer interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used. |
| rootMargin | string | '0px' | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros. |
| threshold | number or number[] | 0 | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
| once | boolean | false | Only trigger the observer once. |
| onChange | (entry, unobserve) => void | undefined | Call this function whenever the intersection state changes. It will receive the current IntersectionObserverEntry along with unobserve function to stop monitoring and observing the component. |
| notSupported | () => void | undefined` | Call this function if intersection observer is not support. |