Scrolly | Angular fake-scroller for mobile.

Scrolly angular directive


Stars : 10

Forks : 10

Created by Andrew Joslin

bower install angular-scrolly

Demo Download GitHub

Scrolly is an angular-js directive for fake-scroller for mobile. Lightweight and webkit-friendly.
angular-scrolly is a small angular add-on for mobile applications.

It is a simple javascript implementation of ‘fake’ scrolling using touch events with CSS transforms and transitions.

Android 2.x webkit has problems with scrolling: the ‘overflow’ CSS property is not even implemented in it! Using fake scrolling, we can avoid this problem completely.
We would like to be able to implement pull to refresh, but it is not possible to do nicely with normal webkit scrolling on iOS. It is almost trivial, however, if we have a javascript-based scrolling solution.
The biggest problem with web-based mobile applications currently that I have not seen solved is that of navigating big lists of data (100+ items) on a mobile device. In a native application, “virtual scrolling” is implemented: no matter how many items are in a list, only {{number of items that fit on screen}} are ever actually rendered. With a javascript scrolling solution, we are able to detect the scrolling events we need to be able to implement virtual scrolling.
Why couple it with AngularJS?
I have had lots of success building nice mobile AngularJS applications. I think its approach is great for them.

Additionally, with Angular easy seperation of concerns and directives, we can make a scrolling solution that will work with almost any css layout, with small amounts of code.

We can have easy directives to attach fake-scrolling to an element, and for pull-to-do-something and virtual scrolling.


Javascript plugin