hello, friends once again I welcome all of you to today’s How To Scroll to Specific Element In Ionic Angular? article on RKRKNOWLEDGE. I hope you all are safe in your homes.
In today’s How To Do Scroll to Specific Element In Ionic Angular? the article, we will learn how we can scroll to the top-bottom in ionic angular? and how to scroll to the specific element inside our ionic application? And we will also learn about the event and method of scrolling present in the ion-content component of the Ionic framework, then let’s start.
How Can We Enable Scroll Event In Ion-content Component?
First of all, let us see how can we enable scroll events on the ion-content component? ion-content is the main component of the ionic framework, inside which we place all the elements used in our mobile application.
If we want to enable scroll events in our ionic page then we have to set the scroll events property to true which is by default false you can also see it in the ionic documentation whose code I have shown below.
<ion-content
[scrollEvents]="true"
</ion-content>Let us now see which scroll events are available in ion-content component.
How To Scroll to Specific Element In Ionic Angular? – ScrollEvents Available On Ion-Content
- ionScrollStart: This event is triggered before scroll starts.
- ionScrollEnd: This event triggered when the scroll ends.
- ionScroll : triggered at the time of scrolling.
Now we will add these scroll events to the ion-content element and define the method related to the event in the component class which we have to Shown below.
<ion-content [scrollEvents]="true"
(ionScrollStart)="logScrollStart($event)"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd($event)"
>
</ion-content>Now we will define the method for these events in component class as I shown below
export class HomePage {
logScrollStart(event) {
console.log("logScrollStart : When Scroll Starts", event);
}
logScrolling(event) {
console.log("logScrolling : When Scrolling", event);
}
logScrollEnd(event) {
console.log("logScrollEnd : When Scroll Ends", event);
}
}Method Available On Ion-Content
There is the following method available on the ion-content section for scroll to top, bottom, or any other coordinate point.
- scrollToTop: By using this method you can scroll to the top of the component.
- scrollToBottom: This method is used to scroll to the bottom of the component.
- scrollToPoint: This method is used to scroll to a specific location that is given in the X, Y coordinate.
- scrollByPoint: By using this method you can scroll to a specific distance given in the X, Y coordinate.
Let’s now understand these methods by using them in the example mentioned below
First of all, we have to define the method in the component class then we will call that method from the template file. Here we will use the @Viewchild decorator to bind the scroll methods with the element of our ion content.
home.ts
import { Component ,ViewChild} from '@angular/core'; //for bind scroll method with the element
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;
constructor() {}
ScrollToBottom() {
this.content.scrollToBottom(1500);
}
ScrollToTop() {
this.content.scrollToTop(1500);
}
ScrollToPoint(X, Y) {
this.content.scrollToPoint(X, Y, 1500);
}
}
- First, we imported the ViewChild decorator as I have shown in the above code
- Then imported the ion-content component from @ionic/angular.
- so that with the help of @ViewChild we can bind the scroll method with the ion-content component in our HTML template file
- After that, I created a function called ScrollToTop for top scrolling, in the same way, ScrollToBottom for the bottom and ScrollToPoint for scrolling to a specific point, the value we will give in the X and Y coordinates, according to that value it will scroll to that place in the ionic page.
- In the function, we used the Ion-Content method scrollToTop(),scrollToBottom(),
- scrollToPoint() for scroll to top,bottom,and to specified point in X and Y Coordinate.
home.page.html
Now we will add some buttons in the HTML template file and call the function defined in the component class. As I mentioned below code.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" [scrollEvents]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-button (click)="ScrollToBottom()"> Scroll To Bottom </ion-button>
<ion-button (click)="ScrollToPoint(500, 160)"> Scroll To Point</ion-button>
<ion-card>
........................Dummy Paragraph (Lorem Ipsum).........
</ion-card>
<ion-button (click)="ScrollToPoint(-300, -120)"> Scroll To Point</ion-button>
<ion-button (click)="ScrollToTop()"> Scroll To Top </ion-button>
</ion-content>Next In the above-highlighted code, I have called the function from the component class on the button click. The output of the above code is shown below.
How to scroll to an element in our Ionic page?
Let us now tell you how you can scroll to an element inside your Ionic page.
- To do this, firstly, we will create a function in the component class, and in that function, we will get the ID of an element. as shown below.
home.page.ts
scrollToLabel(label)
{
var id = document.getElementById(label);
this.content.scrollToPoint(0,id.offsetTop-60,500)
}
scrollToBottomLabel(label)
{
var id1 = document.getElementById(label);
this.content.scrollToPoint(0,id1.offsetTop-60,700)
}- By using the offsetTop property of an element we can get the position of an element relative to the top of the offsetParent element.
- Then we’ll use the scrollToPoint() method of the ion-content component here. In the scrollToPoint method, 3 arguments are given, first X, second Y, and then the duration in milliseconds. By giving the duration you can specify the speed of the scrolling according to your preference.
home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Implement Ion-content Scroll Events
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" [scrollEvents]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Implement Ion-content Scroll Events</ion-title>
</ion-toolbar>
</ion-header>
<ion-button (click)="scrollToBottomLabel('second')"> Scroll To An Element</ion-button>
<h4 id="abc">Dummy text</h4>
<div style="font-size: 18px;text-align: justify;line-height: 2;word-spacing: 5px;padding-left: 10px;padding-right: 10px;">
....Dummy Paragraph(Lorem Ipsum)....
<h5 id="second" style="margin-left: 20px;
font-weight: bold;font-size: 28px;">scrolling elmenent</h5>
....Dummy Paragraph(Lorem Ipsum)....
</div>
<ion-button (click)="scrollToBottomLabel('second')"> Scroll To An Element</ion-button>
<ion-button (click)="scrollToLabel('abc')">Scroll To An Element</ion-button>
</ion-content>- Now first of all we will give the ID to an element to till where we want to scroll. which I have shown in the above highlighted code.
- After that called the function named scrollToLabel from the component class and passed the given Id of the element in the function.
So like this, you can easily implement scrolling in your Ionic page. Thank you for visiting RKRKnowlede.com. If you have any queries and suggestions regarding this topic please tell us by commenting on this post in the comment section. Keep visiting
How To Scroll to Specific Element In Ionic Angular?
You May Also Like:–
