Check if an element is in viewport, overlap with viewport, or close to viewport. Vanilla JavaScript. No dependency. Super tiny.
$ npm install viewport-overlap-checker
import {isElementFullyInViewport} from 'viewport-overlap-checker'; const image = document.getElementById('img'); isElementFullyInViewport(image); // true
import {isElementPartInViewport} from 'viewport-overlap-checker'; const image = document.getElementById('img'); isElementPartInViewport(image); // true
import {isElementCloseToViewport} from 'viewport-overlap-checker'; const image = document.getElementById('img'); isElementCloseToViewport(image, {top: 10}); // true // this means the margin between top of element and bottom of viewport is no more than 10px; // if we used it like isElementCloseToViewport(image, {top: 10, left: 20}); // this means the left of element is close to left of viewport in 20px AND top is close to bottom // of viewport in 10px. // Trikcy: the {top, bottom, left, right} values can be negative so you can restrict // the element is in center of viewport.