Ionic Scroll

Ionic Scroll : This is used to create scrollable container for content. is used to create scollable area in ionic. Here in this tutorial we are going to explain how to create ionic scroll area with example and demo.

Ionic Scroll

Here is simple example of ionic scroll –

<ion-scroll zooming="true" direction="xy">
<ul class="list">
<li class="item item-checkbox">
   Item 1
   
</li>
 
<li class="item item-checkbox">
   Item 2
   
</li>
<li class="item item-checkbox">
   Item 3
   
</li>
 
<li class="item item-checkbox">
   Item 4
   
</li>
<li class="item item-checkbox">
   Item 5
   
</li>
 
<li class="item item-checkbox">
   Item 6
   
</li>
<li class="item item-checkbox">
   Item 7
   
</li>
 
<li class="item item-checkbox">
   Item 8
   
</li>
<li class="item item-checkbox">
   Item 8
   
</li>
 
<li class="item item-checkbox">
   Item 9
   
</li>
</ul>
 </ion-scroll>

The above example will produce the output something like this –

API

delegate-handle [optional(string)]– Used to identify this scrollView with $ionicScrollDelegate.

direction [optional(string)]– Direction of scroll. ‘x’ or ‘y’ or ‘xy’. Default is ‘y’.

locking [optional(boolean)] – Used to lock screen in one direction. This is useful to set to false when zoomed in or scrolling in two directions. Default value is set true.

paging [optional(boolean)]– If you want to scroll with paging.

on-refresh [optional(expression)]– Called when pull-to-refresh.

on-scroll [optional(expression)]– Called when user scrolls.

scrollbar-x [optional(boolean)]– Used to show the horizontal scrollbar. Default value is true.

scrollbar-y [optional(boolean)]– Used to show the vertical scrollbar. Default value true.

zooming [optional(boolean)]– Used to support pinch-to-zoom

min-zoom [optional(integer)]– Used to set the smallest zoom allowed. The default value is 0.5.

max-zoom [optional(integer)]– Used to set the largest zoom allowed. The default value is 3.

has-bouncing [optional(integer)]– Used to allow scrolling to bounce past the edges of the content. This is set true in ios and false in android.