If you're looking to determine when the bottom has been reached while scrolling, you can use a code snippet like the following:
Below is an example code snippet that demonstrates how this can be achieved:
Note: The solution provided utilizes Angular 9 and Ionic 5.
<ion-content
[scrollEvents]="true"
(ionScroll)="scrolling($event)"
>
<ion-list>
<ion-item *ngFor="let item of items">
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
</ion-list>
</ion-content>
import { IonContent } from '@ionic/angular';
@ViewChild(IonContent) content: IonContent;
ngOnInit() {
// populate a list of items for displaying scroll
this.generateNumItems(100);
setTimeout(() => {
// scroll to bottom after 2 seconds
this.scrollToBottom();
}, 2000);
}
generateNumItems(number) {
for (let i = 0; i < number; i++) {
this.items.push(i);
}
}
scrolling(event: any) { // event interface not used here
this.detectBottom();
}
scrollToBottom() {
this.content.scrollToBottom(500);
}
async detectBottom() {
const scrollElement = await this.content.getScrollElement(); // obtain scroll element
// check if max bottom has been reached
if (
scrollElement.scrollTop ===
scrollElement.scrollHeight - scrollElement.clientHeight
) {
console.info('Max bottom reached!');
}
}