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.

• John Resig's article Learning from Twitter.
• Paul Lewis's article Leaner, Meaner, Faster Animations with requestAnimationFrame.

$ 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.

• Guillermo Paz (Frontend developer - JavaScript developer | Web standards lover)
• E-mail: guille87paz@gmail.com
• Twitter: @pazguille
• Web: https://pazguille.me

MIT license. Copyright © 2014.