inviewport-checker v1.0.0

InViewPort-Checker

Detects if an element is completely or only with an edge (or center) in the viewport.

Installation

Using npm
npm i inviewport-checker --save

Using yarn
yarn add inviewport-checker

How to use

Take a look at the small example in the public directory

Add the bundle to your footer scriptblock

<script src="./JavaScript/ng.gbcr.js"></script>

Element is in Viewport with top, center or bottom

let element = document.querySelector('section');

let between = new IsBetweenValuesInViewport(element, {
    position: 'top', // top, center, bottom
    top: 0, // between this
    bottom: 50, // and that
    class: 'isBetween-CustomClass', // if true, give a custom class
    onLoad: 'onLoad', // viewport detection on dom loaded! Otherwise remove from this conf object
    onScroll: 'onScroll', // viewport detection on window scroll! Otherwise remove from this conf object
}, false); // set to true to get debug informations in console

Element is completely in viewport

let element = document.querySelector('section');

let completely = new IsCompletelyInViewport(element, {
    class: 'isCompletelyIn-CustomClass', // if true, give a custom class
    onLoad: 'onLoad', // viewport detection on dom loaded! Otherwise remove from this conf object
    onScroll: 'onScroll', // viewport detection on window scroll! Otherwise remove from this conf object
}, false); // set to true to get debug informations in console

Set up your own EventListener

window.addEventListener('scroll', Event => {
    let isCompletely = completely.inViewport(Event), // {boolean}
        isBetween = between.inViewport(Event); // {boolean}

    if (isCompletely) {
        console.log(`${element.getAttribute('id')} is in COMPLETELY viewport`) // if true, do this
    }

    if (isBetween) {
        console.log(`${element.getAttribute('id')} is BETWEEN given values`) // if true, do this
    }
})