🐹 Scrolley
Extra scroll event listeners for DOM Elements!
Features
- Zero dependencies!
- Super tiny, at ~600B gzipped
- Ultra fast performance
Table of contents
Installation
To start using scrolley, add it to your project using npm or yarn by running:
// npm
npm install --save scrolley
// yarn
yarn add scrolley
Setup
To start listening to Element scroll events, simply import Scrolley somewhere in your project, like so:
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
.
...// Get your Elementconst element = document// Define a callback when the element scrollsconst callbackFn = console // Subscribeelement // Unsubscribeelement
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. 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
License
MIT © Q