Detecting An Element Appears Or Disappears From The Viewport – in-view.js

Preview:

Description:

Just another JavaScript library which detects when an element is in the viewport and triggers custom events when it is scrolled into or out of the view.

How to use it:

Install the library by add the in-view.js script to your webpage.

<script src="in-view.min.js"></script>

Check if a specific element is in the viewport.

nView.is(document.querySelectorAll('.el')[0]);

Setup the offset when checking.

inView.offset(100);
// or
inView.offset(-100);

Check the status of the element manually.

inView('.el').check();

Do something if the element enters or exits from the viewport.

// enter
inView('.el').on('enter', doSomething);
// exit
inView('.el').on('exit', doSomething);

If you want the trigger events only be called once:

// enter
inView('.el').once('enter', doSomething);
// exit
inView('.el').once('exit', doSomething);

Emit event for any single element manually.

inView('.el').emit('exit', document.querySelectorAll('.el')[0]);