https://github.com/vaneenige/uos

🐭 A tiny 250b scroll listener with progress.
https://github.com/vaneenige/uos

observer progress scroll

Last synced: 9 days ago
JSON representation

🐭 A tiny 250b scroll listener with progress.

• Host: GitHub
• URL: https://github.com/vaneenige/uos
• Owner: vaneenige
• License: mit
• Created: 2019-01-09T07:19:19.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-20T17:09:12.000Z (almost 6 years ago)
• Last Synced: 2025-03-29T06:02:12.333Z (17 days ago)
• Topics: observer, progress, scroll
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/uos
• Size: 13.7 KB
• Stars: 350
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-star-libs - vaneenige / uos

README

        
# Update On Scroll (uos)

[![npm version](https://img.shields.io/npm/v/uos.svg)](https://www.npmjs.com/package/uos)

[![gzip size](http://img.badgesize.io/https://unpkg.com/uos/dist/uos.mjs?compression=gzip)](https://unpkg.com/uos)

[![license](https://img.shields.io/npm/l/uos.svg)](https://github.com/vaneenige/uos/blob/master/LICENSE)

[![dependencies](https://img.shields.io/badge/dependencies-none-ff69b4.svg)](https://github.com/vaneenige/uos/blob/master/package.json)

[![TypeScript](https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80)](https://www.typescriptlang.org/)

Update On Scroll (uos) is a tiny library to provide the easiest way for updating values on scroll. Based on percentual or pixel based begin and end values, progress is returned trough a callback.

This utility can be useful for CSS animations, DOM changes, WebGL transitions or anything that can be updated based on a progress value.

#### Features:

- Small in size, no dependencies

- Percentage or pixel based values

- Optimized for multiple instances

## Install

```

$ npm install --save uos

```

## Usage

Import the library:

```js

import updateOnScroll from 'uos';

```

Update an element based on pixels:

```js

updateOnScroll(100, 500, progress => {

  // Progress between 100px and 500px

});

```

Update an element based on percentages:

```js

updateOnScroll(0.2, 0.6, progress => {

  // Progress between 20% and 60%

});

```

> Only a single scroll listener will be used regardless of how many instances are created. The callback of an instance will be called on every update.

## License

MIT © Colin van Eenige