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

Category: Javascript , Recommended | August 29, 2016
Author: camwiegert
Views Total: 1,905
Official Page: Go to website
Last Update: August 29, 2016
License: MIT

Preview:

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

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]);

You Might Be Interested In:


Leave a Reply