angular-snapscroll

angular-snapscroll

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

Demo

Installation

Install with bower:

bower install angular-snapscroll

Or with npm:

npm install angular-snapscroll

Or simply download the latest release. Note that in this case you also need to download the latest angular-wheelie release and the latest angular-scrollie release.

Usage

The pre-built files can be found in the dist/ directory. 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>

Add snapscroll to your app's module dependencies:

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

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>

Touch support

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).

Documentation

Have a look at the docs for all the configuration options. For more examples, view the source on the demo site.

Todo's

• 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.

Contributing

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:

npm install

Then to continuously watch files and run tests as you write code, run:

grunt

Check out the Gruntfile for more grunt tasks (grunt test, grunt build etc).

License

The MIT License