ion-content
Delegate: $ionicScrollDelegate
The ionContent directive provides an easy to use content area that can be configured to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser’s native overflow scrolling will suffice, and so we’ve made it easy to toggle between the Ionic scroll implementation and overflow scrolling.
You can implement pull-to-refresh with the ionRefresher
directive, and infinite scrolling with the ionInfiniteScroll
directive.
If there is any dynamic content inside the ion-content, be sure to call .resize() with $ionicScrollDelegate
after the content has been added.
Be aware that this directive gets its own child scope. If you do not understand why this is important, you can read https://docs.angularjs.org/guide/scope.
Usage
<ion-content
[delegate-handle=""]
[direction=""]
[locking=""]
[padding=""]
[scroll=""]
[overflow-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[start-x=""]
[start-y=""]
[on-scroll=""]
[on-scroll-complete=""]
[has-bouncing=""]
[scroll-event-interval=""]>
...
</ion-content>
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. |
|
padding
(optional)
|
boolean
|
Whether to add padding to the content. Defaults to true on iOS, false on Android. |
|
scroll
(optional)
|
boolean
|
Whether to allow scrolling of content. Defaults to true. |
|
overflow-scroll
(optional)
|
boolean
|
Whether to use overflow-scrolling instead of
Ionic scroll. See |
|
scrollbar-x
(optional)
|
boolean
|
Whether to show the horizontal scrollbar. Default true. |
|
scrollbar-y
(optional)
|
boolean
|
Whether to show the vertical scrollbar. Default true. |
|
start-x
(optional)
|
string
|
Initial horizontal scroll position. Default 0. |
|
start-y
(optional)
|
string
|
Initial vertical scroll position. Default 0. |
|
on-scroll
(optional)
|
expression
|
Expression to evaluate when the content is scrolled. |
|
on-scroll-complete
(optional)
|
expression
|
Expression to evaluate when a scroll action completes. Has access to 'scrollLeft' and 'scrollTop' locals. |
|
has-bouncing
(optional)
|
boolean
|
Whether to allow scrolling to bounce past the edges of the content. Defaults to true on iOS, false on Android. |
|
scroll-event-interval
(optional)
|
number
|
Number of milliseconds between each firing of the 'on-scroll' expression. Default 10. |