scrollemitter
v1.1.3
Published
enhanced scroll events like scroll: start, progress, stop, min, max
Downloads
10
Maintainers
Readme
ScrollEmitter
enhanced scroll events like scroll: start, progress, stop, min, max
ScrollEmitter gives you custom scroll events like
scroll:start
scroll:progress
scroll:up
scroll:down
scroll:left
scroll:right
scroll:stop
scroll:min
scroll:max
for better event / action handling the events are triggered only in animation frames for the most performant way of default DOM manipulation.
further more it adds special propertys to the scroll state :
scrolling.y
scrolling.x
scrolling.speed {x,y, xMax, yMax}
scrolling.direction {x,y}
ScrollEmitter will only be instanciated once for the same scroll target to save memory and optimize the performance.
Dependencies
Browser support
IE >= 9, *
install
npm i --save scrollemitter
yarn add scrollemitter
Usage
var ScrollEmitter = require('ScrollEmitter');
// takes window as scroll target
var scrolling = new ScrollEmitter();
// or
var elementScrolling = new ScrollEmitter({el: document.querySelector('yourElement')});
scrolling
.on('scroll:down', function(event) {
console.log('========== scroll:down =============');
})
.on('scroll:up', function(event) {
console.log('========== scroll:up =============');
})
.on('scroll:max', function(event) {
console.log('========== scroll:max =============');
})
.on('scroll:min', function(event) {
console.log('========== scroll:min =============');
})
.on('scroll:start', function(event) {
console.log('========== scroll:start =============');
})
.on('scroll:progress', function(event) {
console.log(
'scroll:progress y:' +
scrolling.y +
' direction: ' +
scrolling.direction.y
);
})
.on('scroll:stop', function(event) {
console.log('========== scroll:stop =============');
});
demo (will be updated soon)
https://rawgit.com/soenkekluth/scrollemitter/master/demo/index.html please see the console.logs for now