Skip to content

Check if an element is In viewport, overlap with viewport, or close to viewport by Vanilla JavaScript

Notifications You must be signed in to change notification settings

chenzhihao/is-in-viewport

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

is-in-viewport

Check if an element is in viewport, overlap with viewport, or close to viewport. Vanilla JavaScript. 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

About

Check if an element is In viewport, overlap with viewport, or close to viewport by Vanilla JavaScript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published