viewport-funcs v0.3.1

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

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:

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:

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