javascript - Angular Ionic - Detectar si <ion-content> está desplazado hasta el fondo máximo

Estoy escribiendo un mensajero con Angular e Ionic. Quiero ejecutar el método scrollToBottom solo si está desplazado al máximo hacia abajo. Porque si alguien se desplaza hacia arriba para ver mensajes antiguos, y la otra persona envía algún mensaje, no se desplaza constantemente hasta el fondo mientras tanto.

Esta es la documentación: https://ionicframework.com/docs/api/content pero no puedo encontrar ninguna que me ayude a resolver esto.

Respuesta #1

Si quieres saber cuándo el fondo ya está desplazado al máximo, entonces necesitas hacer algo como este código:

Escribo un código de ejemplo para lograr el objetivo.

Nota: Estoy usando Angular 9 e Ionic 5 en esta solución.

<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() {
    // create a list of items to show the scroll
    this.generateNumItems(100);
    setTimeout(() => {
      // after 2 secs then scroll to bottom
      this.scrollToBottom();
    }, 2000);
  }

  generateNumItems(number) {
    for (let i = 0; i < number; i++) {
      this.items.push(i);
    }
  }

  scrolling(event: any) { // event has an interface but I don't need it
    this.detectBottom();
  }

  scrollToBottom() {
    this.content.scrollToBottom(500);
  }

  async detectBottom() {
    const scrollElement = await this.content.getScrollElement(); // get scroll element
   // calculate if max bottom was reached
    if (
      scrollElement.scrollTop ===
      scrollElement.scrollHeight - scrollElement.clientHeight
    ) {
      console.info('max bottom was reached!');
    }
  }