Needful Program Management

    scrolling

    0.1.1 • Public • Published

    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

    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

    License

    MIT license. Copyright © 2014.

    Install

    npm i scrolling

    DownloadsWeekly Downloads

    23

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • pazguille