Angular Иони c - Определить, если прокручивается максимальное дно

Question

Я пишу мессенджер с angular и ioni c. я хочу запустить mothod scrollToBottom, только если прокручивается максимальное дно. Потому что, если кто-то прокручивает вверху, чтобы проверить старые сообщения, и партнер отправляет какое-либо сообщение, он тем временем не пинается внизу каждый раз.

Это документация: https://ionicframework.com/docs/api/content но я не могу найти любой, который помогает мне решить эту проблему.

Answer 1

Если вы хотите знать, когда нижняя часть уже прокручивается максимально, вам нужно сделать что-то вроде этого кода:

Я напишу пример кода для достижения цели.

Примечание: I Я использую Angular 9 и Ioni c 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() {
    // 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!');
    }
  }