🐹 Scrolley

Extra scroll event listeners for DOM Elements!

Features

• Zero dependencies!
• Super tiny, at ~600B gzipped
• Ultra fast performance

Table of contents

• Installation
• Setup
• Usage
• Events
• Examples
• See also
• License

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:

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.

...
// 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. 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

License

MIT © Q