1.0.2 • Published 5 years ago
@sil/inview v1.0.2
Inview
A tiny Vue Directive to check and get back the inview percentage of an element.
Install
Install the package
npm install @sil/inview
Import the package
import Inview from '~/@sil/inview
Define the component:
Vue.directive(Inview);Use the component with default values:
<any-element v-inview /> Arguments
| Argument | Default | Description |
|---|---|---|
| root | null | The observer root (from which element should the observer, observe) |
| margin | 0px | The observer rootMargin (margin around the observable element) |
| treshold | [0.0, 0.1, ... 1.0] | Treshold are steps of observing, the more steps the more the function will be called, but it will also get heavier. |
| setClasses | true | Set classes to the element for inview and out of view |
| setCustomProperties | true | Set custom properties to the element with the value of inview. |
| output | number | Output value by default is a number (between 0 and 1), but can also be a percentage |
| centered | false | The output value can be centered, which makes the inview value 1 (number) or 0% (percentage) |
| active | true | Active can be set on false, in that case the directive won't be triggered |
| debug | false | Output some helpfull debug information |