Version: v6

ion-content

Fixed Content
Interfaces
Usage
Properties
Events
Methods
CSS Shadow Parts
CSS Custom Properties
Slots

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.

Interfaces

ScrollBaseDetail

interface ScrollBaseDetail {
  isScrolling: boolean;
}

ScrollDetail

interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
  scrollTop: number;
  scrollLeft: number;
}

ScrollBaseCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing on the ionScrollStart and ionScrollEnd events.

interface ScrollBaseCustomEvent extends CustomEvent {
  detail: ScrollBaseDetail;
  target: HTMLIonContentElement;
}

ScrollCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing on the ionScroll event.

interface ScrollCustomEvent extends ScrollBaseCustomEvent {
  detail: ScrollDetail;
}

Usage

Angular
Javascript
React
Stencil
Vue

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

<ion-content>
  <h1>Main Content</h1>

  <div slot="fixed">
    <h1>Fixed Content</h1>
  </div>
</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'));

import React from 'react';
import { IonContent } from '@ionic/react';

const ContentExample: React.FC = () => (
  <IonContent
    scrollEvents={true}
    onIonScrollStart={() => {}}
    onIonScroll={() => {}}
    onIonScrollEnd={() => {}}>
      <h1>Main Content</h1>

      <div slot="fixed">
        <h1>Fixed Content</h1>
      </div>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'content-example',
  styleUrl: 'content-example.css'
})
export class ContentExample {
  logScrollStart() {
    console.log('Scroll start');
  }

  logScrolling(ev) {
    console.log('Scrolling', ev);
  }

  logScrollEnd() {
    console.log('Scroll end');
  }

  render() {
    return [
      <ion-content
        scrollEvents={true}
        onIonScrollStart={() => this.logScrollStart()}
        onIonScroll={(ev) => this.logScrolling(ev)}
        onIonScrollEnd={() => this.logScrollEnd()}>
          <h1>Main Content</h1>

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

<template>
  <ion-content
    :scroll-events="true"
    @ionScrollStart="logScrollStart()"
    @ionScroll="logScrolling($event)"
    @ionScrollEnd="logScrollEnd()">
      <h1>Main Content</h1>

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

<script>
import { IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonContent }
});
</script>

Properties

color

Description	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.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

forceOverscroll

Description	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.
Attribute	`force-overscroll`
Type	`boolean ｜ undefined`
Default	`undefined`

fullscreen

Description	If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
Attribute	`fullscreen`
Type	`boolean`
Default	`false`

scrollEvents

Description	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`.
Attribute	`scroll-events`
Type	`boolean`
Default	`false`

scrollX

Description	If you want to enable the content scrolling in the X axis, set this property to `true`.
Attribute	`scroll-x`
Type	`boolean`
Default	`false`

scrollY

Description	If you want to disable the content scrolling in the Y axis, set this property to `false`.
Attribute	`scroll-y`
Type	`boolean`
Default	`true`

Events

Name	Description
`ionScroll`	Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.
`ionScrollEnd`	Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.
`ionScrollStart`	Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.

Methods

getScrollElement

Description	Get 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.
Signature	`getScrollElement() => Promise<HTMLElement>`

scrollByPoint

Description	Scroll by a specified X/Y distance in the component.
Signature	`scrollByPoint(x: number, y: number, duration: number) => Promise<void>`

scrollToBottom

Description	Scroll to the bottom of the component.
Signature	`scrollToBottom(duration?: number) => Promise<void>`

scrollToPoint

Description	Scroll to a specified X/Y location in the component.
Signature	`scrollToPoint(x: number ｜ undefined ｜ null, y: number ｜ undefined ｜ null, duration?: number) => Promise<void>`

scrollToTop

Description	Scroll to the top of the component.
Signature	`scrollToTop(duration?: number) => Promise<void>`

CSS Shadow Parts

Name	Description
`background`	The background of the content.
`scroll`	The scrollable container of the content.

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`	Bottom padding of the content
`--padding-end`	Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
`--padding-start`	Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
`--padding-top`	Top padding of the content

Slots

Name	Description
``	Content is placed in the scrollable area if provided without a slot.
`fixed`	Should be used for fixed content that should not scroll.

Contents

Fixed Content​

Interfaces​

ScrollBaseDetail​

ScrollDetail​

ScrollBaseCustomEvent​

ScrollCustomEvent​

Usage​

Properties​

color​

forceOverscroll​

fullscreen​

scrollEvents​

scrollX​

scrollY​

Events​

Methods​

getScrollElement​

scrollByPoint​

scrollToBottom​

scrollToPoint​

scrollToTop​

CSS Shadow Parts​

CSS Custom Properties​

Slots​