Element Visibility Detector JavaScript Library – ViewportDetector.js

Preview:

Description:

ViewportDetector.js is a lightweight and convenient JavaScript library to detect if an element is inside the viewport and allows you to do some stuff as the element becomes visible on scroll.

How to use it:

Import the main JavaScript file ‘viewportdetector.js’ into the html document.

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

Create a new instance the specify the element you want to track the visibility.

<div class="box">
  ...
</div>

var example = new ViewportDetector('.box');

Fire a callback function when the box is scrolled into view.

var cb = function(el, visibility) {
    if (visibility) {
        alert('show');
    } else {
        el.classList.remove('show');
    }
}
var example = new ViewportDetector('.box', cb);

Possible options which can be passed as an object to the ‘ViewportDetector’ function.

var example = new ViewportDetector('.box', cb,{
    // Marge to expand or reduce element detection size.
    marge: null,
    // Container selector within detection should happen.
    container: window
    
});

Add a new element.

example.add(selector, callback, opts)