ion-scroll
Delegate: $ionicScrollDelegate
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 |
|
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 |
|
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. |