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.

Leave a Reply

avatar
  Subscribe  
Notify of