Advanced Visible State Detection – visibilityEvents.js

visibilityEvents.js is an advanced ‘is in viewport’ detection library to determine whether a part or all or the entire element is within the viewport.

How to use it:

Installation.

# NPM
$ npm install visibilityevents --save

Import the visibilityEvents.js in the document.

<script src="visibilityEvents.js"></script>

Trigger an event when the element is completely visible.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('show', function(){
   // do something
});

Trigger an event when a part of the element is visible.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('showpart', function(ev){
   console.log("Event: %s for %s. Visibility state: %s", ev.type, ev.target.id, ev.detail.visible);
});

Trigger an event when the element is completely hidden.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('hide', function(){
   // do something
});

Trigger an event when a part of the element is hidden.

var myEl = document.getElementById("element-to-track");
myEl.addEventListener('hidepart', function(ev){
   console.log("Event: %s for %s. Visibility state: %s", ev.type, ev.target.id, ev.detail.visible);
});