Add Rich Interactions to Your Scroll Experience with Detect Scroll Library

Preview:

Description:

Detect Scroll.js is a lightweight and performant ES6 module designed to enhance the default browser scroll event listener by providing more granular insight into the user’s scrolling activity.

Instead of just the generic scroll event, this library fires ten custom events that detect:

• When scrolling starts and stops
• The direction of scrolling (up, down, left, right)
• The X and Y positions as the scroll progresses
• When the user reaches the minimum or maximum scroll positions
• And more

This extra level of detail allows you to build more sophisticated interactions (e.g. infinite scroll) and animations that are tied to the user’s scrolling behavior.

How to use it:

1. Install and import the detectScroll module.

# NPM
$ npm i @egstad/detect-scroll

import detectScroll from '@egstad/detect-scroll'

2. Create a new instance of the detectScroll and register event listerners.

const instance = new detectScroll(window, {
  events: {
    scrollUp: yourFunction,
    scrollDown: yourFunction,
    scrollLeft: yourFunction,
    scrollRight: yourFunction,
    scrollStart: yourFunction,
    scrollStop: yourFunction,
    scrollX: yourFunction,
    scrollY: yourFunction,
    scrollMinX: yourFunction,
    scrollMaxX: yourFunction,
    scrollMinY: yourFunction,
    scrollMaxY: yourFunction,
  },
})

3. You can also register the events using the native JS addEventListener() method.

window.addEventListener('scrollUp', yourFunction)
window.addEventListener('scrollDown', yourFunction)
...

4. Available options.

const instance = new detectScroll(window, {
  vertical: true, // allows vertical scrolling
  horizontal: true, // allows horizontal scrolling
  passiveMode: true,
  debugMode: false,
  events: {
    scrollUp: yourFunction,
    scrollDown: yourFunction,
    scrollLeft: yourFunction,
    scrollRight: yourFunction,
    scrollStart: yourFunction,
    scrollStop: yourFunction,
    scrollX: yourFunction,
    scrollY: yourFunction,
    scrollMinX: yourFunction,
    scrollMaxX: yourFunction,
    scrollMinY: yourFunction,
    scrollMaxY: yourFunction,
  },
})