# Partially auto-scroll issue

**URL:** <https://forum.ionicframework.com/t/partially-auto-scroll-issue/126048>\
**Category:** ionic-v3\
**Created:** [March 27, 2018, 9:09am UTC](https://forum.ionicframework.com/t/partially-auto-scroll-issue/126048 "2018-03-27T09:09:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sujit77](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@sujit77](https://forum.ionicframework.com/u/sujit77)\
**Post date:** [March 27, 2018, 9:09am UTC](https://forum.ionicframework.com/t/partially-auto-scroll-issue/126048/1 "2018-03-27T09:09:54Z")

</div>

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](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/16#post_17).

**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`?

---

<div class="post-metadata">

**Author:** ![davidvalen95](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/davidvalen95/32/115381_2.png) [@davidvalen95](https://forum.ionicframework.com/u/davidvalen95)\
**Post date:** [March 27, 2018, 9:19am UTC](https://forum.ionicframework.com/t/partially-auto-scroll-issue/126048/2 "2018-03-27T09:19:17Z")

</div>

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

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

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

  }

```

---

<div class="post-metadata">

**Author:** ![sujit77](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@sujit77](https://forum.ionicframework.com/u/sujit77)\
**Post date:** [March 27, 2018, 10:27am UTC](https://forum.ionicframework.com/t/partially-auto-scroll-issue/126048/3 "2018-03-27T10:27:43Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:42pm UTC](https://forum.ionicframework.com/t/partially-auto-scroll-issue/126048/4 "2021-07-19T21:42:51Z")

</div>