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