scrolling

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.

Based on

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

Installation

$ npm install scrolling

$ bower install scrolling

$ component install pazguille/scrolling

Usage

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);

API

scrolling(el, listener)

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);

scrolling#remove(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);

Build

npm run dist

Test

Open file ./test/test.html in your browser.

Made with ❤ by

• Guillermo Paz (Frontend developer - JavaScript developer | Web standards lover)
• E-mail: [email protected]
• Twitter: @pazguille
• Web: http://pazguille.me

License

MIT license. Copyright © 2014.