Element Visibility Detector JavaScript Library – ViewportDetector.js

Category: Javascript | October 25, 2018
Author: Spope
Views Total: 453
Official Page: Go to website
Last Update: October 25, 2018
License: MIT

Preview:

Element Visibility Detector JavaScript Library – ViewportDetector.js

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)

You Might Be Interested In:

Leave a Reply