Ionic Scroll

ion-scroll

ion-scroll is used to create a scrollable container.

Usage

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

API

Attributes Type Details
delegate-handle
(Optional)
 string

The handle is used to$ionicScrollDelegatespecify the scroll view.
direction
(Optional)
 string

The direction of scrolling. 'x' or 'y'. Default is 'y'.
paging
(Optional)
 boolean

Whether to scroll with paging.
on-refresh
(Optional)
 expression

Called when a pull-to-refresh isionRefreshertriggered.
on-scroll
(Optional)
 expression

Triggered when the user scrolls.
scrollbar-x
(Optional)
 boolean

Whether to show the horizontal scrollbar. Defaults to false.
scrollbar-y
(Optional)
 boolean

Whether to show the vertical scrollbar. Defaults to true.
zooming
(Optional)
 boolean

Whether to support pinch (two-finger) zooming.
min-zoom
(Optional)
 integer

The minimum scale allowed (defaults to 0.5)
max-zoom
(Optional)
 integer

The maximum scale allowed (defaults to 3)

Example

HTML Code

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

CSS Code

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

JavaScript Code

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

ion-infinite-scroll

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

When the user scrolls past the bottom of the content, the on-infinite you specify is triggered.

Usage

<ion-content ng-controller="MyController">
  <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();
  });
}

When there is no more data to load, you can use a simple method to stop the infinite scroll: the Angular ng-if directive:

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

Attributes Type Details
on-infinite expression

The event triggered when scrolled to the bottom.
distance
(Optional)
 string

The distance from the bottom to trigger the on-infinite expression. Default: 1%.
icon
(Optional)
 string

The icon to display while loading. Default: 'ion-loading-d'.

$ionicScrollDelegate

Delegate control of scroll views (created via the ion-content and ion-scroll directives).

This method is directly invoked by the $ionicScrollDelegate service to control all scroll views. Use the $getByHandle method to control a specific scroll view.

Usage

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>

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

Methods

resize()

Tell the scroll view to recalculate its container size.

scrollTop([shouldAnimate])
Parameters Type Details
shouldAnimate
(Optional)
 boolean

Whether to apply scroll animation.

 
scrollBottom([shouldAnimate])
Parameters Type Details
shouldAnimate
(Optional)
 boolean

Whether to apply scroll animation.
Other Extensions