Ionic Scrollbar

ion-scroll

ion-scroll is used to create a scrollable container.

Usage

&lt;ion-scroll
    [delegate-handle=""]
    [direction=""]
    [paging=""]
    [on-refresh=""]
    [on-scroll=""]
    [scrollbar-x=""]
    [scrollbar-y=""]
    [zooming=""]
    [min-zoom=""]
    [max-zoom=""]>
    ...
</ion-scroll>

API

Property	Type	Details
delegate-handle (optional)	String	The handle used to identify the scroll view with $ionicScrollDelegate.
direction (optional)	String	The direction of the scroll. 'x' or 'y'. Default is 'y'.
paging (optional)	Boolean	Whether to enable paging scroll.
on-refresh (optional)	Expression	Called when pulling down to refresh, triggered by ionRefresher.
on-scroll (optional)	Expression	Triggered when the user scrolls.
scrollbar-x (optional)	Boolean	Whether to show the horizontal scrollbar. Default is false.
scrollbar-y (optional)	Boolean	Whether to show the vertical scrollbar. Default is true.
zooming (optional)	Boolean	Whether to support pinch-to-zoom.
min-zoom (optional)	Integer	The minimum zoom level allowed (default is 0.5).
max-zoom (optional)	Integer	The maximum zoom level allowed (default is 3).

Example

HTML Code

&lt;ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
    <div style="width: 5000px; height: 5000px; background: url('http://www.tutorialpro.org/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS Code

body {
  cursor: url('http://www.tutorialpro.org/try/demo_source/finger.png'), auto;
}

JavaScript Code

angular.module('ionicApp', ['ionic']);

Try it »

ion-infinite-scroll

The ionInfiniteScroll directive allows you to call a function when the user reaches the footer or near the footer.

It triggers the on-infinite function you specified when the user scrolls past the bottom of the content.

Usage

&lt;ion-content ng-controller="MyController">
  &lt;ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

function MyController($scope, $http) {
  $scope.items = [];
  $scope.loadMore = function() {
    $http.get('/more-items').success(function(items) {
      useItems(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  $scope.$on('stateChangeSuccess', function() {
    $scope.loadMore();
  });
}

To prevent infinite scrolling when there is no more data to load, you can use Angular's ng-if directive:

&lt;ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"

<ion-infinite-scroll on-infinite="loadMoreData()"> </ion-infinite-scroll>


### API

| Attribute | Type | Details |
| --- | --- | --- |
| on-infinite | Expression | The event triggered when scrolling to the bottom. |
| distance (optional) | String | The distance from the bottom to trigger the on-infinite expression. Default: 1%. |
| icon (optional) | String | The icon displayed while loading. Default: 'ion-loading-d'. |

---

## $ionicScrollDelegate

Delegate for controlling scroll views (created by ion-content and ion-scroll directives).

This method is called directly on the $ionicScrollDelegate service to control all scroll views. Use the $getByHandle method to control specific scroll views.

### Usage

<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">Scroll to Top!</button> </ion-content> </body>

function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }


### Methods

resize()


Tells the scroll view to recalculate its container size.

scrollTop([shouldAnimate])


| Parameter | Type | Details |
| --- | --- | --- |
| shouldAnimate (optional) | Boolean | Whether to apply scrolling animation. |

scrollBottom([shouldAnimate]) ```

Parameter	Type	Details
shouldAnimate (optional)	Boolean	Whether to apply scrolling animation.

❮ Ionic Range Ionic Actionsheet ❯