ion-scroll
Delegate: $ionicScrollDelegate

See the Pen by Ionic (@ionic) on CodePen.

Creates a scrollable container for all content inside.

Usage

Basic usage:

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
  <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
 </ion-scroll>

Note that it’s important to set the height of the scroll box as well as the height of the inner content to enable scrolling. This makes it possible to have full control over scrollable areas.

If you’d just like to have a center content scrolling area, use ionContent instead.

API

Attr Type Details
delegate-handle
(optional)
string

The handle used to identify this scrollView with $ionicScrollDelegate.

direction
(optional)
string

Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.

locking
(optional)
boolean

Whether to lock scrolling in one direction at a time. Useful to set to false when zoomed in or scrolling in two directions. Default true.

paging
(optional)
boolean

Whether to scroll with paging.

on-refresh
(optional)
expression

Called on pull-to-refresh, triggered by an ionRefresher.

on-scroll
(optional)
expression

Called whenever the user scrolls.

on-scroll-complete
(optional)
expression

Called whenever the scrolling paging is completed.

scrollbar-x
(optional)
boolean

Whether to show the horizontal scrollbar. Default true.

scrollbar-y
(optional)
boolean

Whether to show the vertical scrollbar. Default true.

zooming
(optional)
boolean

Whether to support pinch-to-zoom

min-zoom
(optional)
integer

The smallest zoom amount allowed (default is 0.5)

max-zoom
(optional)
integer

The largest zoom amount allowed (default is 3)

has-bouncing
(optional)
boolean

Whether to allow scrolling to bounce past the edges of the content. Defaults to true on iOS, false on Android.