YouTip

* * * ## ion-scroll ion-scroll is used to create a scrollable container. ### Usage ... ### API | Attribute | Type | Details | | --- | --- | --- | | delegate-handle _(optional)_ | `string` | The handle used to identify the scroll view with `$ionicScrollDelegate`. | | direction _(optional)_ | `string` | Direction of the scroll. 'x' or 'y'. Default 'y'. | | paging _(optional)_ | `boolean` | Whether to scroll by paging. | | on-refresh _(optional)_ | `expression` | Called on pull-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` | Minimum allowed zoom level (default is 0.5) | | max-zoom _(optional)_ | `integer` | Maximum allowed zoom level (default is 3) | ### Example ### HTML Code

### CSS Code body { cursor: url(''), auto;} ### JavaScript Code angular.module('ionicApp', ['ionic']); * * * ## ion-infinite-scroll The ionInfiniteScroll directive allows you to call a function when the user reaches the footer or near the footer. When the user scrolls past the bottom content, the on-infinite attribute you specified will be triggered. ### Usage 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, a simple way to prevent infinite scrolling is to use Angular's ng-if directive: ### API | Attribute | Type | Details | | --- | --- | --- | | on-infinite | `expression` | Event triggered when scrolling to the bottom. | | distance _(optional)_ | `string` | The distance from the bottom needed to trigger the on-infinite expression. Default: 1%. | | icon _(optional)_ | `string` | The icon to display while loading. Default: 'ion-loading-d'. | * * * ## $ionicScrollDelegate Authorized control of the scroll view (created via the ion-content and ion-scroll directives). This method is triggered directly by the $ionicScrollDelegate service to control all scroll views. Use the $getByHandle method to control a specific scroll view. ### Usage Scroll to top! function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); };} ### Methods resize() Tells the scroll view to recalculate the size of its container. scrollTop() | Parameter | Type | Details | | --- | --- | --- | | shouldAnimate _(optional)_ | `boolean` | Whether to apply scroll animation. | scrollBottom() | Parameter | Type | Details | | --- | --- | --- | | shouldAnimate _(optional)_ | `boolean` | Whether to apply scroll animation. |