ionic scroll bar

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

on-refreshon-scrollscrollbar-xscrollbar-yzoomingmin-zoommax-zoom

Properties	Type	Details
delegate-handle (optional)	`String`	This handle uses `$ionicScrollDelegate` to specify the scroll view.
direction (optional)	`String`	The direction of scrolling. 'x' or 'y'. Default is 'y'.
paging (optional)	##Boolean value	Whether the paging is scrolling.
(optional)	Expression	Call pull-down refresh, triggered by ionRefresher`.`
(optional)	Expression	Fires when the user scrolls.
(optional)	Boolean value	Whether to display the horizontal scroll bar. Default is false.
(optional)	Boolean value	Whether to display the vertical scroll bar. Default is true.
(optional)	Boolean value	Whether to support two-finger zoom.
(optional)	integer	Minimum zoom allowed (default is 0.5)
(optional)	Integer	Maximum amount of scaling allowed (default is 3)

Example

HTML Code

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

CSS Code

body {
  cursor: url('../style/images/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 near the footer.

When the user scrolls beyond the bottom content, the on-infinite you specify will be 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 no more data is loaded, you can use a simple method to prevent infinite scrolling, that is angular's ng-if directive:

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

API

AttributesTypeDetailson- infinitedistanceicon

$ionicScrollDelegate

Authorizes control of the scroll view (created through the ion-content and ion-scroll directives).

This method is directly triggered 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();
  };
}

Method

resize()

Tells the scroll view to recalculate its container size.

scrollTop([shouldAnimate])


	Expression	Event triggered when scrolling to the bottom.
(optional)	String	Scroll from the bottom to trigger the distance on-infinite expression. Default: 1%.
(optional)	String	The icon displayed when loading. Default: 'ion-loading-d'.