Add Rich Interactions to Your Scroll Experience with Detect Scroll Library

Category: Javascript | July 10, 2023
Author:egstad-construct
Views Total:41 views
Official Page:Go to website
Last Update:July 10, 2023
License:MIT

Preview:

Add Rich Interactions to Your Scroll Experience with Detect Scroll Library

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,
  },
})

You Might Be Interested In:


Leave a Reply