How To Add Styles To Ionic Page

In this Ionic tutorial, we'll discuss Scroll events and methods available on the ion-content component in the Ionic Framework. These events tin exist used to Scroll the page to Bottom, Top or to some other coordinate on the screen using the 10 or Y points.

Hither we volition also explore how to enable Scroll events and then apply Scroll event callbacks and methods to curl on the screen in the awarding page.

We'll as well hash out How to smoothly scroll to a specific element within the folio using offsetTop property of the element.

# How to enable Ringlet Events on the ion-content component?

The ion-content component is the primary wrapper of the Ionic folio which is used to identify content nosotros meet on a folio other then Header and Footer.

To enable the Curl events, we ready the [scrollEvents] property to true which is set to false by default.

<ion-content [scrollEvents]="true"> ... ... </ion-content>

# Scroll events available on ion-content

The ion-content component emits following events which can be used by developers to handles certain situation like checking when the user reached lesser or peak.

ionScrollStart : Emitted before the coil is started.

ionScrollEnd : Emitted when the gyre has ended.

ionScroll : Emitted while scrolling.

Using ion-content scroll events

We can add these event triggers on the ion-content chemical element as shown below and define the methods in the component class as shown below:

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

Define callback methods for these events in the component class

              export grade HomePage {    logScrollStart(event) {     console.log("logScrollStart : When Roll Starts", upshot);   }    logScrolling(upshot) {     console.log("logScrolling : When Scrolling", outcome);   }    logScrollEnd(outcome) {     panel.log("logScrollEnd : When Scroll Ends", event);   } }

# Methods available on ion-content

Following are the methods bachelor to deliberately scrolling the ion-content section to Tiptop, Bottom or any coordinate indicate.

scrollToBottom : Scroll to the bottom of the component

scrollToTop : Scroll to the top of the component

scrollToPoint : Curlicue to a specified 10/Y location in the component

scrollByPoint : Ringlet by a specified X/Y distance in the component

Add together some buttons to phone call methods from the component for Scroll to Top, Scroll to Lesser & Curl To Point

              <ion-header [translucent]="true">   <ion-toolbar>     <ion-championship>       Ionic Scroll Events     </ion-title>   </ion-toolbar> </ion-header>  <ion-content       [scrollEvents]="true"       (ionScrollStart)="logScrollStart($event)"       (ionScroll)="logScrolling($outcome)"      (ionScrollEnd)="logScrollEnd($outcome)" >    <ion-push button (click)="ScrollToBottom()"> Ringlet To Bottom </ion-button>   <ion-button (click)="ScrollToPoint(300, 120)"> Curlicue To Point Left </ion-push button>      <ion-list>     <ion-item *ngFor="allow item of dummyList">       <ion-label>{{ item.value }}</ion-label>     </ion-item>   </ion-list>       <ion-button (click)="ScrollToPoint(-300, -120)"> Scroll To Point Right </ion-push button>   <ion-push button (click)="ScrollToTop()"> Curlicue To Summit </ion-button>   </ion-content>

Add methods in Component called from the template. Here nosotros used @ViewChild element variable to demark scroll methods to ion-content chemical element.

            // home.page.ts import { Component, ViewChild } from '@angular/core'; import { IonContent } from '@ionic/angular';  @Component({   selector: 'app-home',   templateUrl: 'abode.page.html',   styleUrls: ['habitation.folio.scss'], }) export grade HomePage {    @ViewChild(IonContent, { static: faux }) content: IonContent;   dummyList: any;     constructor(   ) {     this.dummyList = [       {         value: "Esteban Gutmann IV",       }, {         value: "Bernardo Prosacco Jr.",       }, {         value: "Nicholaus Kulas PhD",       }, {         value: "Jennie Feeney",       }, {         value: "Shanon Heaney",       }, {         value: "Bernardo Prosacco Jr.",       }, {         value: "Nicholaus Kulas PhD",       }, {         value: "Jennie Feeney",       }, {         value: "Shanon Heaney",       }, {         value: "Bernardo Prosacco Jr.",       }, {         value: "Nicholaus Kulas PhD",       }, {         value: "Jennie Feeney",       }, {         value: "Shanon Heaney",       }, {         value: "Bernardo Prosacco Jr.",       }, {         value: "Nicholaus Kulas PhD",       }, {         value: "Jennie Feeney",       }, {         value: "Shanon Heaney",       }, {         value: "Bernardo Prosacco Jr.",       }, {         value: "Nicholaus Kulas PhD",       }, {         value: "Jennie Feeney",       }, {         value: "Shanon Heaney",       }, {         value: "Bernardo Prosacco Jr.",       }, {         value: "Nicholaus Kulas PhD",       }, {         value: "Jennie Feeney",       }, {         value: "Shanon Heaney",       }     ];   }    logScrollStart(effect) {     console.log("logScrollStart : When Scroll Starts", event);   }    logScrolling(result) {     console.log("logScrolling : When Scrolling", effect);   }    logScrollEnd(upshot) {     console.log("logScrollEnd : When Scroll Ends", event);   }    ScrollToBottom() {     this.content.scrollToBottom(1500);   }    ScrollToTop() {     this.content.scrollToTop(1500);   }    ScrollToPoint(X, Y) {     this.content.scrollToPoint(X, Y, 1500);   }   }

# How to smoothly Scroll to an Element within the sections of the page?

Every bit a bonus tip asked by a visitor, how we can implement scrollToLabel method and so that nosotros can easily scroll to a section on the page with a smooth animation.

For this, we will use the ScrollToPoint() method to curlicue the page in Y-axis.

Now we have a dummyList object with thee properties id,title and text.

                          this.dummyList = [       {         id: 'ref',         title: 'Refined pixel holistic',         text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui non et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae error ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'       }, {         id: 'sma',         title: 'Minor Plastic Mouse SAS Frozen',         text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui non et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae fault ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'       }, {         id: 'ibh',         championship: 'IB Hryvnia Beauty',         text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui not et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae error ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'       }, {         id: 'tab',         title: 'Tabular array maroon',         text: 'Inventore quae numquam id rerum. Tempora quaerat et veniam. Similique quia amet. Delectus doloremque delectus et doloribus saepe est magnam voluptatem. Consequatur sed ea excepturi eveniet corrupti laboriosam. Laudantium mollitia placeat nemo quod tenetur qui natus. Facilis sit blanditiis harum explicabo eos at ea expedita. Dolor eius animi quod sint et qui non et rem. Consequatur dolor consequatur quos corrupti dolores quis illo molestiae libero. Nihil aut hic nemo dignissimos. Asperiores quo beatae error ut qui nihil. Voluptatibus perspiciatis fuga voluptas distinctio harum et et dolores. Fugiat dolor molestiae necessitatibus dolorum.'       }     ]

Bind the list in the Home page every bit shown below. if you notice at each <h4> element we accept provided the idattribute which will help to scroll to that section

<ion-content [scrollEvents]="truthful" (ionScrollStart)="logScrollStart($issue)" (ionScroll)="logScrolling($event)"   (ionScrollEnd)="logScrollEnd($event)" course="ion-padding">    <ion-push button (click)="scrollToLabel(detail.id)" *ngFor="let item of dummyList">     {{particular.title}}   </ion-button>    <div *ngFor="allow item of dummyList">     <h4 id='{{item.id}}'>{{particular.title}}</h4>     <p>{{item.text}}</p>   </div>     <ion-button (click)="ScrollToPoint(-300, -120)"> Scroll To Bespeak Right </ion-button>   <ion-button (click)="ScrollToTop()"> Curl To Superlative </ion-button>   </ion-content>

Likewise, nosotros added buttons to whorl to a specific title on click outcome calling the scrollToLabel() we passed the id.

Adjacent, nosotros volition update the home.page.ts file with the following method

                          scrollToLabel(label) {     var titleELe = document.getElementById(characterization);     this.content.scrollToPoint(0, titleELe.offsetTop, thousand);   }

Here we are getting the offsetTop of <h4> element with matching id.The offsetTop is Javascript method which returns the electric current position of the element from the top of the document. The scrollToPoint method takes iii attributes 10-centrality, Y-centrality and duration in ms.

Now tin easily navigate to the title by tapping the title push button

That'south so past following above steps you can add scroll methods and events in Ionis awarding pages for implementing scroll functionalities.