Skip to content
🐹 Scrolley: Extra scroll event listeners for DOM Elements!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
src
stories
.babelrc
.eslintrc
.gitignore
.npmignore
.prettierignore
.prettierrc.yml
.travis.yml
LICENSE
README.md
jest.config.js
package-lock.json
package.json

README.md

🐹 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

You can’t perform that action at this time.