Ionic Content

The Ionic framework provides an <ion-content> element that serves as a container which wraps all the other elements that we want to create in the app. The content component allows an easy to use content area that contains some useful methods to control the scrollable area. In the Ionic app, there should be only one content component in a single view. Contents which contains many other Ionic components can be customized to modify its padding, margin, etc. by using the global styles provided in the CSS utilities. You can also customize it by individual styling using CSS and the available CSS custom properties.

Example

<ion-header>
    <ion-toolbar>
      <ion-title>
        Ion Content
      </ion-title>
    </ion-toolbar>
  </ion-header>
   
  <ion-content>
    <div>
      <p>Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript. It allows developers to build once and run everywhere.</p>
    </div>
    <div>
        <p>It was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.</p>
      </div>
  </ion-content>

Output

Example of Ion-content Scrolling

If you want to use ion-content scroll event, you need to enable scroll events by setting the [scrollEvents] = "true."

There are mainly three scroll events available for ion-content, which are as follows:

ionScrollStart: It is emitted when the scroll has started..
ionScrollEnd: It is emitted when the scroll has ended..
ionScroll: It is emitted while scrolling. By default, it is disabled.

We can understand the ion-content scrolling from the following example.

Home.page.html

<ion-header>
    <ion-toolbar>
      <ion-title>
        Ion Content Scroll
      </ion-title>
    </ion-toolbar>
  </ion-header>
   
  <ion-content
    [scrollEvents]="true"
    (ionScrollStart)="logScrollStart()"
    (ionScroll)="logScrolling($event)"
    (ionScrollEnd)="logScrollEnd()"
  >
    <ion-button (click)="ScrollToBottom()">
      Scroll To Bottom
    </ion-button>
   
    <ion-button (click)="ScrollToPoint(300, 120)">
      Scroll To Point Left
    </ion-button>
   
    <ion-list>
      <ion-item *ngFor="let item of dummyList">
        <ion-label>{{ item.value }}</ion-label>
      </ion-item>
    </ion-list>
   
    <div style="height: 50px;width:600px;" text-right>
      <ion-button (click)="ScrollToPoint(-300, -120)">
        Scroll To Point Right
      </ion-button>
    </div>
   
    <ion-button (click)="ScrollToTop()">
      Scroll To Top
    </ion-button>
  </ion-content>

Home.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonContent, } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild(IonContent, {static: false}) content: IonContent;
  dummyList: any;

  constructor(
  ) {
    this.dummyList = [
      {
        value: 'Himanshu',
      }, {
        value: 'Anubhav',
      }, {
        value: 'Abhishek',
      }, {
        value: 'Akshita',
      }, {
        value: 'Haseena',
      }, {
        value: 'Anubhav',
      }, {
        value: 'Harshita',
      }, {
        value: 'Anisha',
      }, {
        value: 'Haseena',
      }, {
        value: 'Anubhav',
      }, {
        value: 'Abhishek',
      }, {
        value: 'Anisha',
      }, {
        value: 'Haseena',
      }, {
        value: 'Akshita',
      }, {
        value: 'Abhishek',
      }, {
        value: 'Akshita',
      }, {
        value: 'Jyotika',
      }, {
        value: 'Anubhav',
      }, {
        value: 'Abhishek',
      }, {
        value: 'Anisha',
      }, {
        value: 'Haseena',
      }, {
        value: 'Anubhav',
      }, {
        value: 'Abhishek',
      }
    ];
  }
  logScrollStart() {
    console.log('logScrollStart : When Scroll Starts');
  }

  logScrolling() {
    console.log('logScrolling : When Scrolling');
  }

  logScrollEnd() {
    console.log('logScrollEnd : When Scroll Ends');
  }

  ScrollToBottom() {
    this.content.scrollToBottom(1500);
  }

  ScrollToTop() {
    this.content.scrollToTop(1500);
  }

  ScrollToPoint(X, Y) {
    this.content.scrollToPoint(X, Y, 1500);
  }
}

Output

When you execute the above Ionic app, it will give the following screen in your browser.

Now, if you click the "Scroll to Bottom" button, you will go immediately at the bottom of the screen, which you can see in the below screen. Next, when you click the "Scroll to Top" button, you will again reach on the top of the screen, which we can see in the below image.