A set of tools to determine accurate viewport width and height values cross browser, and also element dimensions visible in the viewport.

Source

Methods

(inner) elVisibleHeight(el) → {number}

Returns the height of the visible area of an element in the viewport.

Parameters:
NameTypeDescription
elHTMLElement

The element to get the visible height of.

Since
  • 1.0.0
Source
Returns:

The visible element height in pixels.

Type: 
number
Example
import { getNodes, viewport } from "@gravityforms/utils";

function Example() {
  const target = getNodes( 'example' )[ 0 ];
  console.log( viewport.elVisibleHeight( target ) );
}

(inner) elements() → {object}

Exports document element and window element normalized across browsers. Needed for correct viewport dimension calculation.

Since
  • 1.0.0
Source
Returns:

The elements as { docElem, win }.

Type: 
object
Example
import { viewport } from "@gravityforms/utils";

function Example() {
  const { docElem, win } = viewport.elements();
  console.log( docElem.clientHeight );
}

(inner) height() → {number}

Returns the viewport height in pixels.

Since
  • 1.0.0
Source
Returns:

The viewport height in pixels.

Type: 
number
Example
import { viewport } from "@gravityforms/utils";

function Example() {
  console.log( viewport.height() );
}

(inner) width() → {number}

Returns the viewport width in pixels.

Since
  • 1.0.0
Source
Returns:

The viewport width in pixels.

Type: 
number
Example
import { viewport } from "@gravityforms/utils";

function Example() {
  console.log( viewport.width() );
}