Breaking News: Grepper is joining You.com. Read the official announcement!

jquery event element in viewport

Bad Bear answered on June 8, 2022 Popularity 3/10 Helpfulness 1/10

answer jquery event element in viewport

jquery event element in viewport

Comment

$(document).ready(function () {
    function checkImages() {
        $('img:not(.checked)').each(function () {
            if ($(this).isOnScreen()) {
                $(this).addClass('checked');
                console.log('user saw this image', this.src);
                // do some stuff
            }
        });
    }
    $.fn.isOnScreen = function () {
        const win = $(window);
        const viewport = {
            top: win.scrollTop(),
            left: win.scrollLeft()
        };
        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();
        const bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();
        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };
    $(window).scroll(function () {
        checkImages();
    });
    checkImages();
});

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: element javascript jquery viewport

Link to this answer
Share Copy Link