Ionic 4 | How to Scroll to Top / Bottom using Ion Content Scroll Events


In this post, we will discuss Scroll Events available in Ionic 4 IonContent using which we can scroll Ionic page content to Top, Bottom or to any point providing X Y axis.

Here we will also explore how to use scroll event listeners on ion-content page containers.

To use ion-content scroll event we need to enable scroll events by setting [scrollEvents]=”true”.

Scroll events available for ion-content:

ionScrollStart: Emitted when the scroll has started.
ionScrollEnd: Emitted when the scroll has ended.
ionScroll: Emitted while scrolling. This event is disabled by default. Look at the property: scrollEvents

Methods available on IonContent are:

scrollToBottom: Scroll to the bottom of the component
scrollToTop: Scroll to the top of the component
scrollToPoint: Scroll to a specified X/Y location in the component
scrollByPoint: Scroll by a specified X/Y distance in the component
Add some buttons to call methods from the component for Scroll to Top, Scroll to Bottom & Scroll To Point

Add methods in Component called from the template. Here we used @ViewChild element variable to bind scroll methods to IonContent element.

That’s so by following above steps you can add scroll methods and events in Ionis 4 application pages for implementing scroll functionalities.


Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
shashank trivediNazeh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Nazeh
Guest
Nazeh

Hi Nice one. But how can target a SPECIFIC element on the page and scroll to dynamically ???

shashank trivedi
Guest
shashank trivedi

facing error saying “this.content.scrollToBottom is not a function” , the same error is coming for other functions too. Two changes i have to make to compile this code that is.
1)import { Component,ViewChildren } from ‘@angular/core’;
2) @ViewChildren(IonContent) content: IonContent;

instead of using ViewChild i have to use ViewChildren . Your Help is deeply appreciated. Thanks Alot