viewport-overlap-checker

Check if an element is In viewport, overlap with viewport or close to viewport. No dependency. Super tiny.

Installation

$ npm install viewport-overlap-checker

Usage

Check if an element is totally in viewport

import {isElementFullyInViewport} from 'viewport-overlap-checker';
 
const image = document.getElementById('img');
 
isElementFullyInViewport(image);
// true

Check if an element is overlap with viewport

import {isElementPartInViewport} from 'viewport-overlap-checker';
 
const image = document.getElementById('img');
 
isElementPartInViewport(image);
// true

Check if an element is close to viewport

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.
 

License

MIT