Skip to main content
Version: v5

ion-content

The 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.

Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the CSS Utilities or by individually styling it using CSS and the available CSS Custom Properties.

Fixed Content

In order to place elements outside of the scrollable area, slot="fixed" can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using top, right, bottom, and left.

Usage

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

<div slot="fixed">
<h1>Fixed Content</h1>
</div>
</ion-content>

Properties

color

DescriptionThe 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.
Attributecolor
Typestring | undefined
Defaultundefined

forceOverscroll

DescriptionIf 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.
Attributeforce-overscroll
Typeboolean | undefined
Defaultundefined

fullscreen

DescriptionIf true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
Attributefullscreen
Typeboolean
Defaultfalse

scrollEvents

DescriptionBecause of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to true.
Attributescroll-events
Typeboolean
Defaultfalse

scrollX

DescriptionX軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティをtrueに設定します。
Attributescroll-x
Typeboolean
Defaultfalse

scrollY

DescriptionY軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティにfalseを設定します。
Attributescroll-y
Typeboolean
Defaulttrue

Events

NameDescription
ionScrollEmitted while scrolling. This event is disabled by default. Look at the property: scrollEvents
ionScrollEndEmitted when the scroll has ended.
ionScrollStartEmitted when the scroll has started.

Methods

getScrollElement

DescriptionGet the element where the actual scrolling takes place. This element can be used to subscribe to scroll events or manually modify scrollTop. However, it's recommended to use the API provided by ion-content:

i.e. Using ionScroll, ionScrollStart, ionScrollEnd for scrolling events and scrollToPoint() to scroll the content into a certain point.
SignaturegetScrollElement() => Promise<HTMLElement>

scrollByPoint

Descriptionコンポーネントを指定したX/Y距離だけスクロールさせる。
SignaturescrollByPoint(x: number, y: number, duration: number) => Promise<void>

scrollToBottom

Descriptionコンポーネントの一番下までスクロールします。
SignaturescrollToBottom(duration?: number) => Promise<void>

scrollToPoint

Descriptionコンポーネント内の指定したX/Y位置までスクロールします。
SignaturescrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>

scrollToTop

Descriptionコンポーネントの上部にスクロールします。
SignaturescrollToTop(duration?: number) => Promise<void>

CSS Shadow Parts

NameDescription
backgroundコンテンツの背景です。
scrollコンテンツのスクロール可能なコンテナ。

CSS Custom Properties

NameDescription
--backgroundコンテンツの背景
--colorコンテンツの色
--keyboard-offsetコンテンツのキーボードオフセット
--offset-bottomコンテンツのオフセットボトム
--offset-topコンテンツのオフセットトップ
--padding-bottomコンテンツのBottom Padding
--padding-endコンテンツの方向が左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-startコンテンツの方向が左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-topコンテンツのTop Padding

Slots

NameDescription
``slotなしで提供される場合、コンテンツはスクロール可能な領域に配置されます。
fixedスクロールしてはいけない固定コンテンツに使用する必要があります。
View Source