Extra scroll event listeners for DOM Elements!
- Zero dependencies!
- Super tiny, at ~600B gzipped
- Ultra fast performance
To start using scrolley, add it to your project using npm or yarn by running:
// npm
npm install --save scrolley
// yarn
yarn add scrolley
To start listening to Element scroll events, simply import Scrolley somewhere in your project, like so:
import 'scrolley'And that's it! 🙌
Scrolley's events can be added/removed on a DOM element, just like any other native event, like click, mouseenter, or mousemove.
...
// 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!
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. |
Check out this simply Storybook demo. It was built with React. However, Scrolley is plain ol' vanilla JavaScript. It can work with anything JavaScript supported app, plugin, library, or framework.
MIT © Q