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
| Codesandbox React |  |
View | Edit |
| Codesandbox Vue |  |
View | Edit |
| Codesandbox Angular |  |
View | Edit |
| Codepen Vue | |
View | Edit |
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 --saveUsage
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.