Angular Ionic - 檢測是否<ion-content>滾動到最大底部

Question

我正在寫一個有角度和離子的信使。 如果滾動最大底部，我想觸發方法scrollToBottom 。 因為如果有人滾動頂部查看舊消息，而合作伙伴正在發送任何消息，他不會在每次底部都被踢。

這是文檔： https : //ionicframework.com/docs/api/content，但我找不到任何可以幫助我解決此問題的文檔。

Answer 1

如果您想知道底部何時已經最大滾動，那么您需要執行以下代碼：

我編寫了一些示例代碼來實現目標。

注意：我在這個解決方案中使用了 Angular 9 和 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() {
    // 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!');
    }
  }