appeared.js

Track DOM elements as they scroll into and out of view.

Installation

via npm

npm install appeared

via yarn

yarn add appeared

Usage

Call appeared() with a config object.

Configuration

The config object can have the following parameters:

• elements HTMLElement[]|HTMLElement|HTMLCollection|NodeList|string[]|string or a function returning one of the types.
• appear function to call when an element scrolls into view.
• disappear function to call when an element scolls out of view.
• multiple boolean that indicates if the (dis)appear callbacks should be called successively. Defaults to false.

The Watcher instance

The appeared() function returns either a single or an array of Watcher instances.

Watcher methods:

• detroy removes the event listeners from the window and clears the watcher

Example

import appeared from 'appeared'

appeared({
    elements: ['.element', '#special-element'],
    multiple: true,
    appear: (element, count) => {
        // Element scrolled into view
    },
    disappear: (element, count) => {
        // Element scrolled out of view
    }
})