Check if the element is inview

Usage no npm install needed!

<script type="module">
  import silInview from 'https://cdn.skypack.dev/@sil/inview';



A tiny Vue Directive to check and get back the inview percentage of an element.


Install the package npm install @sil/inview

Import the package

import Inview from '~/@sil/inview

Define the component:


Use the component with default values:

<any-element v-inview />	


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