as

angular-scrollie

Programmatic scrolling as an angular service

Showing:

Popularity

Downloads/wk

14

GitHub Stars

0

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Angular Scroll

Readme

angular-scrollie

Greenkeeper badge Build Status Dependency Status Licence Coverage Status Bower version npm version

UPDATE 2020-04-14: Archived

This project still works as is but is no longer maintained.


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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial