getElementBoundaries

type: function

The getElementBoundaries function returns an element’s geometry and visibility state relative to the current viewport.

Usage

import { getElementBoundaries } from '@mustib/utils/browser';

const element = document.getElementById('my-element') as HTMLElement;
const boundaries = getElementBoundaries(element);

console.log(boundaries.isFullyVisible);

Definition

function getElementBoundaries(element: HTMLElement): {
  elementTop: number;
  elementBottom: number;
  elementLeft: number;
  elementRight: number;
  width: number;
  height: number;
  isTopVisible: boolean;
  isTopFullyVisible: boolean;
  isBottomVisible: boolean;
  isBottomFullyVisible: boolean;
  isLeftVisible: boolean;
  isLeftFullyVisible: boolean;
  isRightVisible: boolean;
  isRightFullyVisible: boolean;
  isFullyVisible: boolean;
} { }

Parameters

1. element

   type element = HTMLElement;

   • Element to evaluate against the viewport.

Returns

type T = object;

• Includes geometry values:
  • `elementTop`, `elementBottom`, `elementLeft`, `elementRight`, `width`, `height`.
• Includes visibility flags:
  • `isTopVisible`, `isTopFullyVisible`, `isBottomVisible`, `isBottomFullyVisible`.
  • `isLeftVisible`, `isLeftFullyVisible`, `isRightVisible`, `isRightFullyVisible`.
  • `isFullyVisible`.