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

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 :

Type	Description
string	Default value : 'main' Using a querySelector you will have to indicate the container to listen to with the appropriate string.

CancelOnDirectionChange

cancelOnDirectionChange description :

Type	Description
boolean	Default value : true Defined if the scroll counter should be reset if the direction of the scroll changes.

Callback

callback description :

Type	Description
function	Default value : () => {} Allows you to define a global callback which will be called at each trigger before the other callbacks.

Scroll

scroll description :

Type

Description

object

Either: An object encapsulating the various configuration parameters for all possible scrolls (X / Y - next / prev). Name Type Description value number Indicates the number of scrolls before the callback is triggered callback function Defines the function to be called when the number of scrolls is reached. An object encapsulating the different scroll axes. Name Type Description x object Either: An object encapsulating the various configuration parameters for all horizontal scrolls. Name Type Description value number Indicates the number of scrolls before the callback is triggered callback function Defines the function to be called when the number of scrolls is reached. An object encapsulating the different directions of the scroll. Name Type Description next object An object contain the various configuration parameters for horizontal next scrolls. Name Type Description value number Default value : 2 Indicates the number of scrolls before the callback is triggered callback function Default value : () => {} Defines the function to be called when the number of scrolls is reached. prev object An object contain the various configuration parameters for horizontal previous scrolls. Name Type Description value number Default value : 2 Indicates the number of scrolls before the callback is triggered callback function Default value : () => {} Defines the function to be called when the number of scrolls is reached. y object Either: An object encapsulating the various configuration parameters for all vertical scrolls. Name Type Description value number Indicates the number of scrolls before the callback is triggered callback function Defines the function to be called when the number of scrolls is reached. An object encapsulating the different directions of the scroll. Name Type Description next object An object contain the various configuration parameters for vertical next scrolls. Name Type Description value number Default value : 4 Indicates the number of scrolls before the callback is triggered callback function Default value : () => {} Defines the function to be called when the number of scrolls is reached. prev object An object contain the various configuration parameters for vertical previous scrolls. Name Type Description value number Default value : 4 Indicates the number of scrolls before the callback is triggered callback function Default value : () => {} Defines the function to be called when the number of scrolls is reached.

Touch

touch description :

Type

Description

object

Either: An object encapsulating the various configuration parameters for all possible touch (X / Y - next / prev). Name Type Description value number Indicates the number of distance covered when touched before the callback is triggered callback function Defines the function to be called when the trigger is reached. An object encapsulating the different touch axes. Name Type Description x object Either: An object encapsulating the various configuration parameters for all horizontal touches. Name Type Description value number Indicates the number of distance covered when touched before the callback is triggered callback function Defines the function to be called when the trigger is reached. An object encapsulating the different directions of the touch. Name Type Description next object An object contain the various configuration parameters for horizontal next touches. Name Type Description value number Default value : 60 Indicates the number of distance covered when touched before the callback is triggered callback function Default value : () => {} Defines the function to be called when the trigger is reached. prev object An object contain the various configuration parameters for horizontal previous touches. Name Type Description value number Default value : 60 Indicates the number of distance covered when touched before the callback is triggered callback function Default value : () => {} Defines the function to be called when the trigger is reached. y object Either: An object encapsulating the various configuration parameters for all vertical touches. Name Type Description value number Indicates the number of distance covered when touched before the callback is triggered callback function Defines the function to be called when the trigger is reached. An object encapsulating the different directions of the touch. Name Type Description next object An object contain the various configuration parameters for vertical next touches. Name Type Description value number Default value : 150 Indicates the number of distance covered when touched before the callback is triggered callback function Default value : () => {} Defines the function to be called when the trigger is reached. prev object An object contain the various configuration parameters for vertical previous touches. Name Type Description value number Default value : 150 Indicates the number of distance covered when touched before the callback is triggered callback function Default value : () => {} Defines the function to be called when the trigger is reached.

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.

Contributors

• Guyomar Alexis - ga-devfront : lead developer of project.
• Daniels-Roth Stan - mrstandu33 : consultant and adviser on development.

See also the list of contributors who participated in this project.

Want to contribute to the project ? First read your document on how to contribute effectively.

License

This project is licensed under the MIT License - see the LICENSE file for details.