Ionic - JavaScript Scroll

The element used for scrolling manipulation in ionic apps is called as the ion-scroll.

Using Scroll

we will produce our hypertext mark-up language part and add properties to that. we are going to add → direction = "xy" to permit scrolling to each facet.


<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px"> <div class = "scroll-container"></div> </ion-scroll>

Next, we will add the image of our world map to div element, which we created inside the ion-scroll and set its width and height.

Scroll Attributes

Attribute Type Details
direction string Possible directions of the scroll. Default value is y
delegate-handle string Used for scroll identification with $ionicScrollDelegate.
locking boolean Used to lock scrolling in one direction at a time. Default value is true.
paging boolean Used to determine if the paging will be used with scroll.
on-refresh expression Called on pull-to-refresh.
on-scroll expression Called when scrolling.
scrollbar-x boolean Should horizontal scroll bar be shown. Default value is true.
scrollbar-y string Should vertical scroll bar be shown. Default value is true.
zooming boolean Used to apply pinch-to-zoom.
min-zoom integer Minimal zoom value.
max-zoom integer Maximal zoom value.
scrollbar-x boolean Used to enable bouncing. Default value on IOS is true, on Android false.

Infinite Scroll

An Infinite scroll is employed to trigger some behavior once scrolling passes very cheap of the page. the subsequent example shows however this works. In our controller, we tend to created a perform for adding things to the list. these things are additional once a scroll passes 100 percent of the last component loaded. this may continue till we tend to hit thirty loaded parts. anytime loading is finished,
on-infinite will broadcast scroll.infiniteScrollComplete event.


   <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>

<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()" 
   distance = "10%"></ion-infinite-scroll>

Controller Code

.controller('MyCtrl', function($scope) {
   $scope.items = [];
   $scope.noMoreItemsAvailable = false;
   $scope.loadMore = function() {
      $scope.items.push({ id: $scope.items.length}); 

      if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true;

Other attributes can also be used with ion-infinite-scroll. Some of them are listed in the table below.

Scroll Delegate

Ionic offers delegate for full management of the scroll components. It will be utilized by injecting a $ionicScrollDelegate service to the controller, then use the strategies it provides.

The following example shows a scrollable list of 20 objects.


<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

Controller Code

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

   $scope.scrollTop = function() {

The above code will produce the following screen −

Ionic Javascript Scroll Bottom

When we tap the button, the scroll will be moved to the top.

Ionic Javascript Scroll Top

Now, we will go through all of the $ionicScrollDelegate methods.