se

scroll-events

performant custom scroll events and custom scroll propertys

Showing:

Popularity

Downloads/wk

360

GitHub Stars

4

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

3.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ScrollEvents

performant custom scroll events and custom scroll propertys

ScrollEvents gives you custom scroll events like scroll:start, scroll:progress and scroll:end 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 :

scrollY
scrollX
speedY
speedX
angle // TODO
directionY
directionX

ScrollEvents will only be instanciated once for the same scroll target to save memory and optimize the performance.

Dependencies

none!

Browser support

IE >= 9, *

install

npm install scroll-events

demo (will be updated soon)

https://rawgit.com/soenkekluth/scroll-events/master/demo/index.html please see the console.logs for now

js

var ScrollEvents = require('scroll-events');
var scrollEvents = new ScrollEvents(); // takes window as scroll target
// or
new ScrollEvents(yourElement)


scrollEvents.on('scroll:down', function(event) {
  console.log('========== scroll:down =============');
});

scrollEvents.on('scroll:up', function(event) {
  console.log('========== scroll:up =============');
});

scrollEvents.on('scroll:start', function(event) {
  console.log('scroll:start     y:' + scrollEvents.y + '  direction: ' + scrollEvents.directionY+' ('+ ScrollEvents.directionToString(scrollEvents.directionY)+')')
});

scrollEvents.on('scroll:progress', function(event) {
  console.log('scroll:progress  y:' + scrollEvents.y + '  direction: ' + scrollEvents.directionY+' ('+ ScrollEvents.directionToString(scrollEvents.directionY)+')')
});

scrollEvents.on('scroll:stop', function(event) {
  console.log('scroll:stop      y:' + scrollEvents.y + '  direction: ' + scrollEvents.directionY+' ('+ ScrollEvents.directionToString(scrollEvents.directionY)+')')
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100