Skip to content

🐹 Scrolley: Extra scroll event listeners for DOM Elements!

License

Notifications You must be signed in to change notification settings

ItsJonQ/scrolley

Repository files navigation

🐹 Scrolley

Build Status npm version Coverage Status

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:

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

License

MIT © Q