Have ideas to improve npm?Join in the discussion! »

    onscrolling

    1.0.0 • Public • Published

    Jank-free onscrolling  Build Status

    A better, smoother, more performant onscroll event interface based on the concepts from this html5rocks tutorial. It uses requestAnimationFrame plus debouncing for performance and mobile-compatibility (thanks to the touchmove event), giving you a fighting chance to achieve the hallowed 60fps of lore with your scroll-listening UI.

    NPM

    Usage

    The module exports an onscrolling module if being used with a CommonJS or AMD module loader, or else exposes a global object as window.onscrolling.

    onscrolling( callback )

    callback function

    The function to call on a scroll event. In this default version, the module will only call the callback() when the page has been scrolled vertically. It will be passed the current vertical scroll position to the callback.

    onscrolling( direction, callback )

    direction string

    The scroll axis to monitor. Values can be x or horizontal to trigger when the page is scrolled horizontally, y or vertical to trigger when the page is scrolled vertically (the default behavior if not direction is provided), or any to trigger when the page is scrolled in any direction.

    callback function

    The function to call when the page is scrolled. It will be passed the current scroll position as a number if listening to a single scroll direction, or an array [x,y] if callback is listening for any scroll direction change.

    onscrolling.remove( fn )

    fn function

    The function to remove from the onscroll handler. In this default version, the function will be removed from the vertical scroll queue.

    onscrolling.remove( direction, fn )

    direction string

    The scroll axis that fn was listening for. Can be x or horizontal, y or vertical, or any to match how the function was originally attached. If a function was attached to multiple scroll directions, calling this method for a specific direction will only remove the listener for that direction.

    fn function

    The function to remove from the onscroll handler for the specified direction.

    Dependencies

    None.

    Compatibility

    Out of the box, onscrolling uses requestAnimationFrame, which is only available in IE10+. For older browsers, your scroll watchers simply won’t run. To add compatibility for those browsers, just include a requestAnimationFrame polyfill.

    Tests

    Tests use Mocha + Should.js + Sinon. Using npm test will run the tests in headless Chrome via mocha-chrome, but you can also open test/index.html directly in a browser.

    TODO

    • Add optional param to specify an object other than window to monitor for scroll events
    • Expose measure and mutate functions to attach handlers specifically to the measuring (read) or mutating (write) portion of each cycle to minimize layout calculations

    Misc

    Note: This package was formerly known as jank-free-onscroll

    Install

    npm i onscrolling

    DownloadsWeekly Downloads

    24

    Version

    1.0.0

    License

    CC0-1.0

    Unpacked Size

    32.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar