[DEPRECATED: You should use https://github.com/pazguille/decouple] Decouple the scroll event from the callback functions.
MIT License
Decouple the scroll event from the callback functions using requestAnimationFrames.
It’s a very, very, bad idea to attach handlers to the window scroll event.
Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea). Any performance degradation in the scroll handler(s) as a result will only compound the performance of scrolling overall. Instead it’s much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions – and then a delay).
by John Resig.
$ npm install scrolling
$ bower install scrolling
$ component install pazguille/scrolling
First, requires the scrolling
component:
var scrolling = require('scrolling');
Now, define a listener for any HTMLElement:
function foo(event) {
console.log('foo');
// The function receive the scroll event as parameter.
console.log(event);
// The function context is the scrolled element.
console.log(this.scrollTop);
}
function bar() {
console.log('bar');
}
Then, add some HTMLelements and its listeners to scrolling:
scrolling(document.querySelector('#box'), foo);
scrolling(window, bar);
// or
scrolling(bar);
Adds an el
with a listener
to the collection.
el
[optional] - A given HTMLElement
to add to scroll.listener
- A given listener
to execute when the given el
is scrolled.scrolling(el, listener);
Removes an el
or its listener
from the collection with the given el
.
el
- A given HTMLElement
to remove.listener
[optional] - A given listener to remove.scrolling.remove(el, listener);
// or
scrolling.remove(el);
npm run dist
Open file ./test/test.html
in your browser.
MIT license. Copyright © 2014.