Check if an element is [at least partially] in the browser viewport.

onScreen.js

const onScreen = elm => {


    const getViewportY = () => {

        const top = window.pageYOffset || document.documentElement.scrollTop;
        const bottom = top + document.documentElement.clientHeight;

        return { top, bottom }
    }


    const getElmCoordinates = elm => {
        const { top, bottom } = elm.getBoundingClientRect();
        return { top, bottom }
    }


    const viewport = getViewportY();

    const elmPosition = getElmCoordinates(elm);

    const top = elmPosition.top + viewport.top;
    const bottom = elmPosition.bottom + viewport.top;


    const onScreenFlags = [
        (top >= viewport.top && top <= viewport.bottom),
        (bottom >= viewport.top && bottom <= viewport.bottom)
    ];

    const atLeastPartlyOnScreen = onScreenFlags.includes(true);

    return atLeastPartlyOnScreen;
}