angular-momentum-scroll

Momentum scroll for AngularJS based on iScroll

Angular Core Dependency: ~1.2.21

Module License: MIT

Added by: Sam Deering

GitHub

Repository

wzr1337/angular-momentum-scroll

Stats

Stars: 59

Watchers: 59

Forks: 15

Author

Patrick
Patrick

Module Description

angular-momentum-scroll

AngularJS directive that adds momentum scroll via iScroll (http://cubiq.org).

Demo

Find a demonstration on http://wzr1337.github.com

Usage

  • Include scrollable.js or scrollable.min.js into your page

  • Declare 'angular-momentum-scroll' as a dependency for your angular app: angular.module('myApp', ['angular-momentum-scroll']);

  • Add the scrollable attribute to a container of your choice:

    • the container MUST have set width and height !!
    • in order to scroll horizontally the .scroller class inside of your container MUST have set width and height !!
  • The container takes an additional attribute parameters according to iScroll docs. e.g.

    <div id="my-cont" style="height: 400px; width: 100%;" scrollable 
    parameters="{{ {vScroll : true, snap: '.row'} }}">
    
    
  • You can register any of the following handlers by specifying a callback function via attribute:

    • onRefresh
    • onBeforeScrollStart
    • onScrollStart
    • onBeforeScrollMove
    • onScrollMove
    • onBeforeScrollEnd
    • onScrollEnd
    • onTouchEnd
    • onDestroy
    • onZoomStart
    • onZoom
    • onZoomEnd
    <div id="my-cont" style="height: 400px; width: 100%;" scrollable
    parameters="{{ {scrollbars : true, snap: '.row'} }}"
    on-scroll-move="doSometginhg()">...</div>
    
    
  • You can bind a variable to the curr-page-x and curr-page-y attribute. The data binding is bidirectional, so that you can scroll programatically as well as being notified on page change.

      <div id="my-cont" style="height: 400px; width: 100%;" scrollable
      parameters="{{ {vScroll : true, snap: '.row'} }}"
      curr-page-y="myPageY">...</div>
    
    
  • You can watch isMinY, isMinX and isMaxX, isMAxY to find out, if the scrlller reached its final top or bottom, left or right position. These help you to build an infinitescroll or similar. use them as follows:

    <ol id='mycontainer' scrollable
      parameters="{{ {vScroll:true, scrollbars: true, snap: 'li'} }}"
      curr-page-x="currPageX" curr-page-y="currPageY" curr-x="currX"
      curr-y="currY" is-min-y="isMinY" is-max-y="isMaxY">
      <li class="listitem" ng-repeat="thing in awesomeThings">{{thing}}</li>
    </ol>
    

Module stats last updated: 2017-04-10 16:00:04

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!