https://github.com/kunukn/position-indicator
https://github.com/kunukn/position-indicator
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/kunukn/position-indicator
- Owner: kunukn
- License: mit
- Created: 2021-05-13T13:14:08.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-19T08:02:25.000Z (almost 4 years ago)
- Last Synced: 2025-03-26T06:11:16.266Z (about 2 months ago)
- Language: Vue
- Size: 220 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Position Indicator
[](https://www.npmjs.com/package/position-indicator)
[](https://www.npmjs.com/package/position-indicator)
[](./LICENSE)
[](https://bundlephobia.com/result?p=position-indicator)
[](https://bundlephobia.com/result?p=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.
```sh
yarn add position-indicator
# For npm, use the command below.
npm install position-indicator --save
```
### Usage
```js
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.
```html
// UMD module is exposed through the "positionIndicator" global variable.
console.log(positionIndicator)
```
## Explore the dist files
https://unpkg.com/position-indicator/
## Documentation
[Documentation generated from source files by Typedoc](./docs/README.md).
## License
Released under [MIT License](./LICENSE).
