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>

Explore the dist files

https://unpkg.com/position-indicator/

Documentation

Documentation generated from source files by Typedoc.

License

Released under MIT License.