claudiu-c
2/8/2017 - 1:49 PM

check if element is in viewport without jquery

function isElementInViewport (el) {

    //special bonus for those using jQuery

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

function callback () {
    alert('is visible now');
}

el = document.getElementById('vis');
function fireIfElementVisible (el, callback) {

    return function () {
        if ( isElementInViewport(el) ) {
            callback();
        }
    }
}

var handler = fireIfElementVisible (el, callback);

if (window.addEventListener) {
    addEventListener('DOMContentLoaded', handler, false);
    addEventListener('load', handler, false);
    addEventListener('scroll', handler, false);
    addEventListener('resize', handler, false);
} else if (window.attachEvent)  {
    attachEvent('onDOMContentLoaded', handler); // IE9+ :(
    attachEvent('onload', handler);
    attachEvent('onscroll', handler);
    attachEvent('onresize', handler);
}