# Ionic Scroll Bottom ?\*

**URL:** <https://forum.ionicframework.com/t/ionic-scroll-bottom/45041>\
**Category:** ionic-v3\
**Created:** [February 29, 2016, 11:21am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041 "2016-02-29T11:21:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![lhteam](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lhteam](https://forum.ionicframework.com/u/lhteam)\
**Post date:** [February 29, 2016, 11:21am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/1 "2016-02-29T11:21:38Z")

</div>

Please help . How can ı scroll bottom of list ?  
I created chat page . When load page, i want to scroll to bottom .

---

<div class="post-metadata">

**Author:** ![ZiFFeL](https://avatars.discourse-cdn.com/v4/letter/z/ad7895/32.png) [@ZiFFeL](https://forum.ionicframework.com/u/ZiFFeL)\
**Post date:** [March 7, 2016, 4:06pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/2 "2016-03-07T16:06:16Z")

</div>

Did you manage to solve this?

---

<div class="post-metadata">

**Author:** ![lhteam](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lhteam](https://forum.ionicframework.com/u/lhteam)\
**Post date:** [March 7, 2016, 4:20pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/3 "2016-03-07T16:20:39Z")

</div>

i didn’t solve it ☹

---

<div class="post-metadata">

**Author:** ![lhteam](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lhteam](https://forum.ionicframework.com/u/lhteam)\
**Post date:** [March 13, 2016, 3:47pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/4 "2016-03-13T15:47:48Z")

</div>

No answer ? Please someone help!

---

<div class="post-metadata">

**Author:** ![ondonda](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ondonda/32/98088_2.png) [@ondonda](https://forum.ionicframework.com/u/ondonda)\
**Post date:** [March 13, 2016, 4:49pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/5 "2016-03-13T16:49:17Z")

</div>

> **[Ionic Framework](https://ionicframework.com/docs/api/components/content/Content/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

scrollBottom() don’t work?

---

<div class="post-metadata">

**Author:** ![hendy](https://avatars.discourse-cdn.com/v4/letter/h/3bc359/32.png) [@hendy](https://forum.ionicframework.com/u/hendy)\
**Post date:** [March 22, 2016, 7:46pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/6 "2016-03-22T19:46:27Z")

</div>

This works for me:

```
<ion-content class="cards-bg" id="messagesContent">
...
</ion-content>

```

Controller:

```
var messagesContent = this.app.getComponent('messagesContent') as Content;
messagesContent.scrollTo(0, messagesContent.getContentDimensions().contentHeight, 700);

```

Note: If you need it during initialization, must call inside `ngAfterViewInit()`

Please vote for [https://github.com/driftyco/ionic/issues/5907](https://github.com/driftyco/ionic/issues/5907)

---

<div class="post-metadata">

**Author:** ![nunoarruda](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nunoarruda/32/107630_2.png) [@nunoarruda](https://forum.ionicframework.com/u/nunoarruda)\
**Post date:** [April 18, 2016, 11:34am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/7 "2016-04-18T11:34:54Z")

</div>

Another way of doing is:

```
let dimensions = this.content.getContentDimensions();
this.content.scrollTo(0, dimensions.scrollBottom, 0);
```

---

<div class="post-metadata">

**Author:** ![dylanvdm](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dylanvdm/32/97856_2.png) [@dylanvdm](https://forum.ionicframework.com/u/dylanvdm)\
**Post date:** [April 19, 2016, 12:17pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/8 "2016-04-19T12:17:04Z")

</div>

Coming in [beta 5](https://github.com/driftyco/ionic/commit/bef4a67025c76af80b5482a2878244152a1b9288).

---

<div class="post-metadata">

**Author:** ![Luffy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luffy/32/95812_2.png) [@Luffy](https://forum.ionicframework.com/u/Luffy)\
**Post date:** [May 2, 2016, 7:44am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/9 "2016-05-02T07:44:18Z")

</div>

ES2015/ES6 Style ScrollToBottom

```
import {ViewChild} from 'angular2/core';
import {Page,Content} from 'ionic-angular';

@Page({  
  templateUrl: 'build/pages/page1/page1.html',
  queries: {
      content: new ViewChild(Content)
  }
})
export class Page1 {
     constructor() {
     }
     scrollToBottom(){
        let dimensions = this.content.getContentDimensions();
        this.content.scrollTo(0, dimensions.scrollBottom, 0);
    }
}
```

---

<div class="post-metadata">

**Author:** ![LordRahl001](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@LordRahl001](https://forum.ionicframework.com/u/LordRahl001)\
**Post date:** [November 20, 2016, 9:00pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/10 "2016-11-20T21:00:36Z")

</div>

Please will this work for javascript as well as i am not using typescript???  
Thanks

---

<div class="post-metadata">

**Author:** ![johnnyfittizio](https://avatars.discourse-cdn.com/v4/letter/j/87869e/32.png) [@johnnyfittizio](https://forum.ionicframework.com/u/johnnyfittizio)\
**Post date:** [December 26, 2016, 12:02pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/11 "2016-12-26T12:02:28Z")

</div>

This works for me. But I had to change how to initialize the Content.

@ViewChild(Content) content: Content;

Source:

> **[Ionic Framework](https://ionicframework.com/docs/api/components/content/Content/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![abhayshiro](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/abhayshiro/32/105652_2.png) [@abhayshiro](https://forum.ionicframework.com/u/abhayshiro)\
**Post date:** [May 5, 2017, 9:25am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/12 "2017-05-05T09:25:02Z")

</div>

Yeah this works.  
check this out by @smukov

> <https://stackoverflow.com/questions/37415085/ionic-2-angular-2-auto-scroll-to-bottom-of-list-page-chat>

---

<div class="post-metadata">

**Author:** ![biranchi125](https://avatars.discourse-cdn.com/v4/letter/b/bcef8e/32.png) [@biranchi125](https://forum.ionicframework.com/u/biranchi125)\
**Post date:** [June 22, 2017, 1:03am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/13 "2017-06-22T01:03:38Z")

</div>

I am getting the error  
`"[ts] Property 'scrollBottom' does not exist on type ContentDimensions"` .The properties of dimensions are as below:

```auto
 {
  "contentHeight": 465,
  "contentTop": 64,
  "contentBottom": 49,
  "contentWidth": 325,
  "contentLeft": 0,
  "scrollHeight": 465,
  "scrollTop": 0,
  "scrollWidth": 325,
  "scrollLeft": 0
}

```

---

<div class="post-metadata">

**Author:** ![95deepan](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/95deepan/32/105918_2.png) [@95deepan](https://forum.ionicframework.com/u/95deepan)\
**Post date:** [June 25, 2017, 6:00am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/14 "2017-06-25T06:00:07Z")

</div>

```auto
import { ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

export class Chat {

  @ViewChild(Content) content: Content;

  constructor( ) { }
  ionViewDidLoad(){
    let dimensions = this.content.getContentDimensions();
    this.content.scrollTo(0, dimensions.scrollHeight+100, 100);
  }
  ionViewDidEnter() {
    let dimensions = this.content.getContentDimensions();
    this.content.scrollTo(0, dimensions.contentHeight+100, 100);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Arulmano](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/arulmano/32/107323_2.png) [@Arulmano](https://forum.ionicframework.com/u/Arulmano)\
**Post date:** [August 1, 2017, 11:20am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/15 "2017-08-01T11:20:32Z")

</div>

please give me a full refe code

---

<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:** [August 11, 2017, 6:38am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/16 "2017-08-11T06:38:26Z")

</div>

The same can be done using `.scrollTop`, `.scrollHeight` present in JavaScript.  
They are use to get scrolled position for a particular element.

Usage -

```auto
    var myElement = document.getElementById('my-element'); // Container which has scrollable vertical contents
    myElement.scrollTop; // Gives scrolled poins from top
    myElement.scrollHeight; // Gives maximum scrollable vertical space

    myElement.scrollTop = myElement.scrollHeight; // Setting the top scroll value to maximum allowed value

```

For animated scrolling -

```auto
	$('body,html').animate({ scrollTop: 0}, 800);

```

---

<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:** [August 11, 2017, 7:14am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/17 "2017-08-11T07:14:32Z")

</div>

I am using `ngAfterViewChecked()`. Mine code structure is -

**home.html -**

```auto
<ion-content padding>
    <div #scrollMe id="messages-container" style="overflow: auto; height: 100%;">
        // All messages elemets. Scroll
    </div>
</ion-content>

```

**home.ts -**

```auto
import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements OnInit, AfterViewChecked{
    // used for scrolling the pane
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngAfterViewChecked() {
        this.scrollToBottom();
    }

    scrollToBottom(): void {
        // method used to enable scrolling
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    }
}

```

**Bonus -** In case you have “Load More messages” button for chat app, within `scrollToBottom()`, you can write conditions to calculate previous height of container. But keep that variable global.

# OR -

**home.html -**

```auto
<ion-content #scrollMe padding style="overflow: auto; height: 100%;">
    <div id="messages-container">
        // All messages elemets. Scroll
    </div>
</ion-content>

```

**home.ts -**

```auto
import { Component,ViewChild, AfterViewChecked, * * } from '@angular/core';
.
.
export class HomePage implements OnInit, AfterViewChecked{
    // used for scrolling the pane
    @ViewChild('scrollMe') private myScrollContainer: ElementRef;

    ngAfterViewChecked() {
        this.scrollToBottom();
    }

    scrollToBottom(): void {
        // methods used to enable scrolling
        var elemObj:any = this.myScrollContainer;
        if(this.clickedLoadMore.clicked && this.clickedLoadMore.data_added){
          // If load more was clicked and data is available
          elemObj.scrollTo(0, elemObj.getContentDimensions().scrollHeight - this.oldChatHeight, 0);
          this.updatePreviousMessagesSize();
        }
        else if(this.messages.length > this.previousMessagesSize){
          // If new message has came in messages array
          elemObj.scrollToBottom();
          this.updatePreviousMessagesSize();
        }
    }
}

```

I have included my codes where I am comparing my previous message height with the new one to maintain current view when new messages loads after clicking on `Load More` button.

I have calculated `this.oldChatHeight` in other part of overall code which is -

```auto
this.oldChatHeight = elemObj.getContentDimensions().scrollHeight;

```

Notice I have used `ElementRef` in `@ViewChild('scrollMe') private myScrollContainer: ElementRef` instead of `Content` which is an alternate of the way mentioned in [Ionic document](https://ionicframework.com/docs/api/components/content/Content/)

---

<div class="post-metadata">

**Author:** ![dotnetdreamer](https://avatars.discourse-cdn.com/v4/letter/d/7ea924/32.png) [@dotnetdreamer](https://forum.ionicframework.com/u/dotnetdreamer)\
**Post date:** [August 11, 2017, 8:00am UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/18 "2017-08-11T08:00:25Z")

</div>

Whether in typescript or plain JavaScript following should work. it is simple. Try it out:

```auto
        var element = document.querySelector('#giveAnIdToTopElementForExampleContentOrWhatever');
        console.log(element);
        element.scrollIntoView();

```

For scrollIntoView support, check [MDN](https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView) documentation or following list take from MDN.

![Capture](https://global.discourse-cdn.com/ionicframework/original/3X/9/5/9583942d9f98b49a2860761bbce44574614df1b4.PNG)

---

<div class="post-metadata">

**Author:** ![dimitri320](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dimitri320/32/116022_2.png) [@dimitri320](https://forum.ionicframework.com/u/dimitri320)\
**Post date:** [August 23, 2017, 3:51pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/19 "2017-08-23T15:51:39Z")

</div>

Thanks a lot! Works perfectly well! Great Job!

---

<div class="post-metadata">

**Author:** ![dimitri320](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dimitri320/32/116022_2.png) [@dimitri320](https://forum.ionicframework.com/u/dimitri320)\
**Post date:** [August 23, 2017, 4:36pm UTC](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041/20 "2017-08-23T16:36:37Z")

</div>

Btw, in iOS the scroll refreshes every second or so, and when I scroll up, it automatically refreshes and scrolls the view to the bottom again, over and over again. Any idea how to fix this? Thanks!

[Next page](https://forum.ionicframework.com/t/ionic-scroll-bottom/45041.md?page=2)