npm

Need private packages and team management tools?Check out npm Orgs. »

element-is-visible-in-viewport

2.0.0 • Public • Published

Element is visible in viewport.

Tells you if an element is visible (vertically only) in the viewport.

Use it like

The method exported takes 3 arguments:

  • The element in question.
  • OPTIONAL - The Mode.
    • 'above' - Tells you if the viewport is above the element.
    • 'below' - Tells you if the viewport is below the element.
    • 'visible' - DEFAULT - Tells you if the element is totally within the viewport.
    • 'any' - Tells you if any part of the element is visible in the viewport.
  • OPTIONAL - 'threshold' - in pixels around the element from which you want to determine if it is visible. Useful if you want to do something right before the element comes into view. Default = 0.
// Using no Mode.
checkVisible(document.querySelector('.something')) && console.log('ELEMENT IS TOTALLY VISIBLE IN THE VIEWPORT');
 
// Using the MODE.
checkVisible(document.querySelector('.something'), 'above') && console.log('ELEMENT IS ABOVE THE VIEWPORT');
checkVisible(document.querySelector('.something'), 'below') && console.log('ELEMENT IS BELOW THE VIEWPORT');
checkVisible(document.querySelector('.something'), 'visible') && console.log('ELEMENT IS TOTALLY THE VIEWPORT');
checkVisible(document.querySelector('.something'), 'any') && console.log('SOME PART OF THE ELEMENT IS VISIBLE');

Inspired by thanks to stack overflow user Tokimon.

I made this lib because lately I have been writing a ton of stuff that needs to know if it is in the viewport or not. I got tired or copy and pasting that code mentioned above.

Keywords

none

install

npm i element-is-visible-in-viewport

Downloadsweekly downloads

10

version

2.0.0

license

ISC

last publish

collaborators

  • avatar
Report a vulnerability