Created by Joel Mukuthu
bower install angular-snapscrollHome Demo Download GitHub
angular-snapscroll adds vertical scroll-and-snap functionality to angular.
- JS-only implementation
- Only requires angular core
- 6.2kB when minified, 2.3kB when gzipped
Install with bower:
bower install angular-snapscroll
Or with npm:
npm install angular-snapscroll
The pre-built files can be found in the
dist/angular-snapscroll.min.js is minified and production-ready. Example usage:
<script src="angular-wheelie/dist/angular-wheelie.min.js"></script> <script src="angular-scrollie/dist/angular-scrollie.min.js"></script> <script src="angular-snapscroll/dist/angular-snapscroll.min.js"></script>
snapscroll to your app's module dependencies:
And now you can add a
snapscroll attribute to any element to make it
snap-scrollable! The element would have a scrollbar to begin with, the idea being
that with the
snapscroll attribute you're adding scroll-and-snap behaviour to
an element that is otherwise already scrollable:
<div style="height: 200px;" snapscroll=""> <div style="height: 200px;"></div> <div style="height: 200px;"></div> <div style="height: 200px;"></div> </div>
All you need to set are the heights of the snapscroll element and it's children
(you can also use the
snap-height attribute for that).
To have the element fill the browser viewport height:
<div snapscroll="" fit-window-height=""> <div></div> <div></div> <div></div> </div>
I recommend using angular-swipe to add touch support but you can use any other library or module that recognizes vertical swipe gestures (e.g. hammer.js). Here's how to do it using angular-swipe:
<div ng-init="snapIndex=0" snapscroll="" snap-height="200" snap-index="snapIndex" ng-swipe-up="snapIndex=snapIndex+1" ng-swipe-down="snapIndex=snapIndex-1"> <div></div> <div></div> <div></div> </div>
If you have nested snapscroll instances, remember to prevent the swipe events in a nested instance from bubbing up to the parents. See the demo for an example (the demo uses angular-swipe).
- snapscroll as an element - would allow use of templates and ngAnimate for animations. Currently this repo has a (rather outdated) 'as-element' branch for this.
Contributions are welcomed! Here are the contribution guidelines.
This project uses Grunt for automation. Once you've forked the repo and cloned it to your machine, run this to install all the dependencies:
Then to continuously watch files and run tests as you write code, run:
Check out the Gruntfile for more grunt tasks (
grunt build etc).