Javatpoint Logo
Javatpoint Logo

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

Output

Ionic Content

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:

  1. ionScrollStart: It is emitted when the scroll has started..
  2. ionScrollEnd: It is emitted when the scroll has ended..
  3. 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

Home.page.ts

Output

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

Ionic Content

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.

Ionic Content
Next TopicIonic DateTime




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA