javascript - Angular Ionic - 检测 是否滚动至最大底部

Question

我正在用 Angular 和 ionic 编写一个 Messenger。我想在滚动到最大底部时触发 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!');
    }
  }