viewport-funcs

A very limited subset of viewport functions I use every day

Install

npm i viewport-funcs

Package on npm

API

• contains
• margins
• rect

contains(el, [offset], [check])

Check if el is in the viewport, return a boolean

Argument	Action
el	the tested Html Element el
offset	optional offset, default to 0
check	optional check, default to false. If true performs multiple tests explained below

If check is true, safer but slower tests are performed

• check if el is a Html Element, with nodeType 1 and landed in the document.body
• check if el has no size. An empty or a display:none div or an img with no src will always return false

const contains = require('viewport-funcs/contains')
 
var el = document.querySelector('.rect')
 
// true if the element is fully or partially in the viewport
contains(el)

---

margins()

Get the viewport size and margins

left, top, right and bottom are relative to each side of the document

The object returned contains:

Key	Value
width	the viewport width
height	the viewport height
left	the margin-left, distance between the left of the document and the left of the viewport
top	the margin-top, distance between the top of the document and the top of the viewport
right	the margin-right, distance between the right of the document and the right of the viewport
bottom	the margin-bottom, distance between the bottom of the document and the bottom of the viewport

The example below shows:

• how to get the viewport bottom-right corner location
• how to get the document width and height

const margins = require('viewport-funcs/margins')
 
// {width: 591, height: 328, left: 0, top: 56, right: 0, bottom: 316}
var data = margins()
 
/*
the viewport bottom-right corner location
{x: 591, y: 384}
*/
var br = {x: data.left + data.width, y: data.top + data.height}
 
/*
the document width and height
{width: 591, height: 700}
*/
var doc = {
   width: data.left + data.width  + data.right,
  height: data.top  + data.height + data.bottom
}

The returned object is internally cached to boost performance

---

rect()

Get the viewport size and position

left, top, right and bottom are relative to the top-left of the document

The object returned contains:

Key	Value
width	the viewport width
height	the viewport height
left	the distance between the left of the document and the left of the viewport
top	the distance between the top of the document and the top of the viewport
right	the distance between the left of the document and the right of the viewport
bottom	the distance between the top of the document and the bottom of the viewport

This means:

• right = left + width
• bottom = top + height

The returned object is internally cached to boost performance

const rect = require('viewport-funcs/rect')
 
// {width: 800, height: 600, left: 10, top: 10, right: 810, bottom: 610}
rect()

Thanks

Mainly forked / inspired on

• in-viewport

Performance and tips from

• documentWidth/Height is the max of 3 tested sizes
• check if the element is visible

License

MIT