Content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view component.

Usage

Angular

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">
</ion-content>

Javascript

<ion-content></ion-content>

var content = document.querySelector('ion-content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`forceOverscroll`	`force-overscroll`	If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.	`boolean \| undefined`	`undefined`
`fullscreen`	`fullscreen`	If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.	`boolean`	`false`
`scrollEvents`	`scroll-events`	Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.	`boolean`	`false`
`scrollX`	`scroll-x`	If you want to enable the content scrolling in the X axis, set this property to `true`.	`boolean`	`false`
`scrollY`	`scroll-y`	If you want to disable the content scrolling in the Y axis, set this property to `false`.	`boolean`	`true`

Events

Event	Description	Detail
`ionScroll`	Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents`	ScrollDetail
`ionScrollEnd`	Emitted when the scroll has ended.	ScrollBaseDetail
`ionScrollStart`	Emitted when the scroll has started.	ScrollBaseDetail

Methods

`getScrollElement() => Promise<HTMLElement>`

Returns the element where the actual scrolling takes places. This element is the one you could subscribe to scroll events or manually modify scrollTop, however, it's recommended to use the API provided by ion-content:

Ie. Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.

Returns

Type: Promise<HTMLElement>

`scrollByPoint(x: number, y: number, duration: number) => Promise<void>`

Scroll by a specified X/Y distance in the component

Parameters

Name	Type	Description
`x`	`number`
`y`	`number`
`duration`	`number`

Returns

Type: Promise<void>

`scrollToBottom(duration?: number) => Promise<void>`

Scroll to the bottom of the component

Parameters

Name	Type	Description
`duration`	`number`

Returns

Type: Promise<void>

`scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>`

Scroll to a specified X/Y location in the component

Parameters

Name	Type	Description
`x`	`null \| number \| undefined`
`y`	`null \| number \| undefined`
`duration`	`number`

Returns

Type: Promise<void>

`scrollToTop(duration?: number) => Promise<void>`

Scroll to the top of the component

Parameters

Name	Type	Description
`duration`	`number`

Returns

Type: Promise<void>

CSS Custom Properties

Name	Description
`--background`	Background of the Content
`--color`	Color of the Content
`--keyboard-offset`	Keyboard offset of the Content
`--offset-bottom`	Offset bottom of the Content
`--offset-top`	Offset top of the Content
`--padding-bottom`	Padding bottom of the Content
`--padding-end`	Padding end of the Content
`--padding-start`	Padding start of the Content
`--padding-top`	Padding top of the Content

Built with StencilJS