Uncover-El 🔍

Reveal to me that which is hidden, unveil to me what is forbidden.

A smol library to scroll a page to an element. Adapted from Cypress's actionability code.

Features

• Quickly scrolls to an element
• Will retry scrolling to account for layout changes
• Configurable detection of covering elements

Installation

NPM and JSR

This library is available on NPM as uncover-el.

npm install uncover-el

It is also available on JSR as @synthsym/uncover-el.

npx jsr add @synthsym/uncover-el

From Github Releases

We also provide ESM and UMD builds from the Github Release CDN. The library is available at window.uncoverEl in browser environments.

Visit the Releases page for more information.

Usage

The function uncover takes a HTMLElement and an optional configuration object.

import { uncover } from 'uncover-el'

const hiddenEl = document.getElementById('hiddenEl')
await uncover(hiddenEl)

The configurable options are listed below.

| Name | Type | Default | Description | | --------------- | --------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------- | | retries | number | 3 | Number of times to retry scrolling. | | interval | number | 100 | Number of milliseconds to wait between retries. | | x | number | 0 | Pixel offset from the left of the element to check for coverage. | | y | number | 0 | Pixel offset from the top of the element to check for coverage. | | scrollBehaviour | 'top' \| 'bottom' \| 'center' | 'top' | Where on the element to perform the first scroll. | | position | 'top' \| 'topLeft' \| 'topRight' \| 'left' \| 'center' \| 'right' \| 'bottomLeft' \| 'bottom'\| 'bottomRight' | 'top' | The anchor of the the element used to determine if the element in covered. |