Angular Ionic - 检测 <ion-content> 是否滚动到最大底部答案

【问题标题】：Angular Ionic - Detect if <ion-content> is scrolled maximum bottomAngular Ionic - 检测 <ion-content> 是否滚动到最大底部
【发布时间】：2020-03-14 05:57:28
【问题描述】：

我正在写一个有角度和离子的信使。我想触发方法scrollToBottom，只要滚动到最大底部。因为如果有人滚动顶部查看旧消息，而伙伴正在发送任何消息，他不会同时每次都被踢到底部。

这是文档：https://ionicframework.com/docs/api/content，但我找不到任何可以帮助我解决此问题的文档。

【问题讨论】：

只需要在群主发消息时滚动到底部，进入群聊，就是正常群聊的行为。
如果聊天中的其他人正在发送消息......在这种情况下，我只想在<ion-content> 已经最大滚动到底部时向下滚动。

标签： javascript angular typescript ionic-framework

【解决方案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!');
    }
  }

【讨论】：