Scroll-event-handler NPM

scroll event handler

Scroll event handler is a NPM package est un package for reading scroll (desktop) or touch (mobile) events and their assigned a callback.

Badges

npm npm bundle size npm

GitHub top language

Demo

The online demo gives you an overview of what can be done with this package.

You can also see the use of this package on my portfolio.

Linter

For this npm ESLint is used with the basic parameters to have a clean code.

Installation

It can be installed from npm.

$ npm install scroll-event-handler

Usage

The minimal configuration for scroll listener is this bellow :

import ScrollListener from 'scroll-event-handler';

let newScrollListener = new ScrollListener({callback: () => console.log('scroll')});

With this configuration scroll listener will fire the callback regardless of the direction using the defaults settings. for further use an example are available below.

Options

Container

container description :

CancelOnDirectionChange

cancelOnDirectionChange description :

Callback

callback description :

Scroll

scroll description :

Touch

touch description :

Methods

Several methods can be called after creating the listener. You will find them below.

removeScrollListener() : allows to suppress the listener.
switchCancelOnDirectionChange() : allows to switch the bolean value of cancelOnDirectionChange.
changeSettings(Object) : allows you to modify the parameters given when creating the listener. It takes the same options as when creating the listener.

You can find the way to call them in the examples section.

Examples

Listen scroll on element

let newScrollListener = new ScrollListener({
  container: '#myListenedElement',
});
// newScrollListener listen the scroll and touch event in your #myListenedElement.

Listen vertical scroll/touch

let newScrollListener = new ScrollListener({
  container: '#myListenedElement',
  scroll: {
    y: {
      value: 5,
      callback: () => console.log('Hello scroll world'),
    },
  },
  touch: {
    y: {
      value: 200,
      callback: () => console.log('Hello touch world'),
    },
  },
});
// now you console.log a string if user verticaly scroll/touch.

Listen horizontal scroll with direction

let newScrollListener = new ScrollListener({
  container: '#myListenedElement',
  scroll: {
    x: {
      prev: {
        value: 5,
        callback: () => console.log('prev scroll'),
      },
      next: {
        value: 2,
        callback: () => console.log('next scroll'),
      },
    },
  },
  touch: {
    x: {
      prev: {
        value: 200,
        callback: () => console.log('prev touch'),
      },
      next: {
        value: 150,
        callback: () => console.log('next touch'),
      },
    },
  },
});
// sent you a different console.log depending on whether the user scrolls forward or backward on the horizontal axis

Setup global callback

let newScrollListener = new ScrollListener({
  container: '#myListenedElement',
  callback: () => console.log('my global callback'),
  scroll: {
    x: {
      prev: {
        value: 5,
        callback: () => console.log('prev scroll'),
      },
      next: {
        value: 2,
        callback: () => console.log('next scroll'),
      },
    },
  },
  touch: {
    x: {
      prev: {
        value: 200,
        callback: () => console.log('prev touch'),
      },
      next: {
        value: 150,
        callback: () => console.log('next touch'),
      },
    },
  },
});
// during each scroll listened to, your global callback function will be called before the others.

Remove a listener

let newScrollListener = new ScrollListener({
  container: '#myListenedElement',
});

newScrollListener.removeScrollListener();
//the listener is now removed.

Switch

let newScrollListener = new ScrollListener({
  container: '#myListenedElement',
  cancelOnDirectionChange: true
});

newScrollListener.switchCancelOnDirectionChange();
// now the cancelOnDirectionChange is false.

Change vertical previous scroll/touch settings

let newScrollListener = new ScrollListener({
  container: '#myListenedElement',
  scroll: {
    x: {
      prev: {
        value: 5,
        callback: () => console.log('prev scroll'),
      },
      next: {
        value: 2,
        callback: () => console.log('next scroll'),
      },
    },
  },
  touch: {
    x: {
      prev: {
        value: 200,
        callback: () => console.log('prev touch'),
      },
      next: {
        value: 150,
        callback: () => console.log('next touch'),
      },
    },
  },
});

newScrollListener.changeSettings({
  scroll: {
    x: {
      prev: {
        value: 10,
      },
    },
  },
  touch: {
    x: {
      prev: {
        value: 300,
      },
    },
  },
});
// now scroll.x.prev value is 10 and the touch.x.prev.value is 300.

Compatible Browsers

The tests were carried out thanks to Browserstack which offers us its services since our npm is opensource.

The npm is now run on all devices and browsers but it's possible that problems may be encountered on browsers that may be common. If this is the case, do not hesitate to open an issue.

Bug or problem ?

If you encounter a problem or a bug due to the NPM package do not hesitate to open an issue with the corresponding label and a detailed description of your problem.