https://github.com/itsjonq/scrolley
🐹 Scrolley: Extra scroll event listeners for DOM Elements!
https://github.com/itsjonq/scrolley
dom-element events javascript listener scroll scroll-events
Last synced: over 1 year ago
JSON representation
🐹 Scrolley: Extra scroll event listeners for DOM Elements!
- Host: GitHub
- URL: https://github.com/itsjonq/scrolley
- Owner: ItsJonQ
- License: mit
- Created: 2018-12-10T19:31:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-17T19:39:14.000Z (over 7 years ago)
- Last Synced: 2023-09-19T16:44:55.496Z (almost 3 years ago)
- Topics: dom-element, events, javascript, listener, scroll, scroll-events
- Language: JavaScript
- Homepage: https://scrolley.netlify.com/
- Size: 711 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🐹 Scrolley
[](https://travis-ci.org/ItsJonQ/scrolley)
[](https://badge.fury.io/js/scrolley)
[](https://coveralls.io/github/ItsJonQ/scrolley?branch=master)
> Extra scroll event listeners for DOM Elements!
## Features
- **Zero dependencies!**
- Super tiny, at ~600B gzipped
- Ultra fast performance
## Table of contents
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Events](#events)
- [Examples](#examples)
- [See also](#see-also)
- [License](#license)
## Installation
To start using scrolley, add it to your project using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/en/) by running:
```
// npm
npm install --save scrolley
// yarn
yarn add scrolley
```
## Setup
To start listening to [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) scroll events, simply import **Scrolley** somewhere in your project, like so:
```js
import 'scrolley'
```
And that's it! 🙌
## Usage
**Scrolley**'s events can be added/removed on a DOM element, just like any other native event, like `click`, `mouseenter`, or `mousemove`.
```js
...
// Get your Element
const element = document.querySelector('.el')
// Define a callback when the element scrolls
const callbackFn = event => console.log(event)
// Subscribe
element.addEventListener('scrollDown', callbackFn)
// Unsubscribe
element.removeEventListener('scrollDown', callbackFn)
```
This library also supports a handful of other scroll events!
## Events
Below are the events that this module provides:
| Event name | Description |
| ------------------ | ---------------------------------------------------------------------------- |
| `scrollUp` | Fires immediately after the `Element` scrolls upward. |
| `scrollDown` | Fires immediately after the `Element` scrolls downward. |
| `scrollToTop` | Fires immediately (once) after the `Element` scrolls to the very top. |
| `scrollToBottom` | Fires immediately (once) after the `Element` scrolls to the very bottom. |
| `scrollFromTop` | Fires immediately (once) after the `Element` scrolls from the very top. |
| `scrollFromBottom` | Fires immediately (once) after the `Element` scrolls bottom the very bottom. |
## Examples
Check out this simply [Storybook demo](https://scrolley.netlify.com/). It was built with React. However, **Scrolley** is plain ol' vanilla JavaScript. It can work with anything JavaScript supported app, plugin, library, or framework.
## See also
- [Resizey](https://github.com/ItsJonQ/resizey)
## License
MIT © [Q](https://jonquach.com)