angular-scrollie

    1.1.1 • Public • Published

    angular-scrollie

    Build Status Dependency Status Licence Coverage Status Bower version npm version

    angular-scrollie exposes a service that allows you to set or animate the scrollTop of an angular element. Uses requestAnimationFrame to provide smooth animations and even polyfills it for old browsers.

    Installation

    Install with bower:

    bower install angular-scrollie

    Or with npm:

    npm install angular-scrollie

    Or simply download the latest release.

    Usage

    The pre-built files can be found in the dist/ directory. dist/angular-scrollie.min.js is minified and production-ready. Example usage:

    <script src="dist/angular-scrollie.min.js"></script>

    Add scrollie to your app's module dependencies:

    angular.module('myapp', ['scrollie']);

    And now you can use the scrollie service in your controllers, directives, services etc. Example usage in a controller:

    app.controller('MyController', [ '$scope', 'scrollie', function ($scope, scrollie) {
        var target = angular.element('#someElement');
        // To set scrollTop without animation
        scrollie.to(element, 10).then(function () {
            console.log('Called in next tick');
        });
        // For animated scrolling in 400ms using easeInOutQuad easing
        scrollie.to(element, 10, 400).then(function () {
            console.log('Called after 400ms');
        });
        // To stop a currently running animation:
        scrollie.stop(element);
    }]);

    API

    scrollie.to(element, scrollTop [, duration [, easing]]) : Promise

    Animates the scrollTop of element from it's current scrollTop to the new scrollTop in a time-frame of duration and using the provided easing function (duration and easing are optional).

    It returns a $q promise object which is resolved when the animation is complete and is rejected if the animation is stopped.

    If duration is not provided or is not valid, then it sets the scrollTop without animating. Note that a promise is still returned but it gets fulfilled in the next tick.

    If no easing is provided and duration is provided then the default easing function used is easeInOutQuad.

    Calling scrollie.to on an element while an animation is currently ongoing will stop that animation and start a new one. Subsequently, the promise for that animation will be rejected.

    scrollie.stop(element)

    Stops any currently-running animation of scrollTop on element. stopping the animation results in rejecting the promise returned by scrollie.to.

    Contributing

    Contributions are welcomed! Here are the contribution guidelines.

    First clone the repository and install dependencies:

    npm install

    To run tests:

    npm test

    To lint the code:

    npm run lint

    To make a production build:

    npm run build

    License

    The MIT License

    Install

    npm i angular-scrollie

    DownloadsWeekly Downloads

    8

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • joelmukuthu