CODEWITHSUNDEEP
javascriptangulartypescriptionic-framework
Budi
Budi

Reputation: 688

Angular Ionic - Detect if <ion-content> is scrolled maximum bottom

I am writing a messenger with angular and ionic. i want to fire the mothod scrollToBottom just if is scrolled max bottom. Because if someone scroll top to check old messages, and the partner is sending any message, he get not kicked everytime bottom meanwhile.

This is the documentation: https://ionicframework.com/docs/api/content but i cant find any that helps me to solve this.

Upvotes: 2

Views: 2183

Answers (1)

bjdose
bjdose

Reputation: 1309

If you want to know when the bottom is already max scrolled then you need to do something like this code:

I write some example code to achieve the goal.

Note: I'm using Angular 9 and Ionic 5 in this solution.

<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!');
    }
  }

Upvotes: 5

Related Questions