Partially auto-scroll issue

Ionic Framework ionic-v3
1

I am working on a chat application. When app starts, it loads few previous chat history messages.
The network call populates the messages[] variable with history messages and using *ngFor() it gets rendered on page.
As soon as rendering gets completed, view scrolls down to latest/last message with help of ngAfterViewChecked(). Logic is exactly same as the OR part fo this answer.

Problem - In some low-performance mobile devices, sometimes the initial auto-scroll scrolls 50-70px less than full height.

I increased the delay time to 400ms using this.scrollToBottom(400) instead of 300ms(default). That slightly reduced the possibility of this issue but doesn’t completely removes it.

Requirement - How can I make sure to scroll the view to complete bottom? Or would I have to use Angular’s variable change detector?

2

you can use @ViewChild(Content) content which is targeting <ion-content>
then you can call this.content.scrollToBottom()
which is ionic function without using any nativeElement

example
in your ts

  @ViewChild(Content) public content: Content;
  constructor(){
    this.getChats();
  }

  public getChats(){
  
    this.httpClient.get(params).subscribe(()=>{
      console.log('getChatsDone');
      this.content.scrollToBottom()
   });

  }
3

I tried solution mentioned by you. But the result remained exactly same as with my initial code.

Now, when I delayed code execution by following codes, things worked perfectly. But it does increases work of garbage collector.

let timeout = setTimeout(()=>{
   this.myScrollContainer.scrollToBottom();
   clearTimeout(timeout);
},100)

Do yo think this can improved somehow?
I think, in low-performance devices, the scrollToBottom() finishes scrolling before determining exact actual height to be scrolled.

1 Like