Position-indicator NPM

Position Indicator

About

Minimal VanillaJS code to know the scroll position of the page with no external dependencies.

A position indicator that updates on:

scroll
resize
body height change.

It has been tested on

Phones (iOS, Android)
Tablets (iPadOS, Android)
Laptops (Mac, Windows)
Modern browsers

It updates when the devices rotates and if the height changes on interaction.

Browser Support


60+	12+	60+

Demo

Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

yarn add position-indicator

# For npm, use the command below.
npm install position-indicator --save

Usage

import { createPositionIndicator } from 'position-indicator'

let myOnInitCallback = (data) => {}
let myOnUpdateCallback = (data) => {}

// where data is:
let data = {
  position /* value between 0 and 1 */,
  prevPosition /* value between 0 and 1 */,
  hasUpdated /* if position is different from previous event */,
  hasScroll /* true or false */,
  eventType /* scroll, resize, heightChange or init */,
  eventDate /* Date.now() */,
}

let positionIndicator = createPositionIndicator({
  onInit: myOnInitCallback,
  onUpdate: myOnUpdateCallback,
  useResizeListener: true, // optional: default true
  useResizeObserver: true, // optional: default true
})

positionIndicator.init()

// Then later when not used anymore
positionIndicator.destroy()

Installation from CDN

This module has an UMD bundle available through JSDelivr and Unpkg CDNs.

<!-- For UNPKG use the code below. -->
<script src="https://unpkg.com/position-indicator"></script>

<!-- For JSDelivr use the code below. -->
<script src="https://cdn.jsdelivr.net/npm/position-indicator"></script>

<script>
  // UMD module is exposed through the "positionIndicator" global variable.
  console.log(positionIndicator)
</script>