scroll-event-handler
v1.1.0
Published
Scroll event handler is a NPM package est un package for reading scroll (desktop) or touch (mobile) events and their assigned a callback.
Downloads
28
Maintainers
Readme
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 :
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 ofcancelOnDirectionChange
.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.