Ion-scroll scrollToBottom

Ionic Framework ionic-v3
1

Hey everyone,

I have a <ion-scroll> that takes half my screen, since a client wanted a chat inside the app, I want to set the <ion-scroll> to always be at the bottom (always showing the last message) since it’s a chat module.

I have tried to implement the logic from here: http://ionicframework.com/docs/v2/api/components/content/Content/#scrollToTop

This is the relevant part of the code I was trying to use:

export class SquadPage {
  @ViewChild('chatScroll') chatScroll: Content;

  constructor(public nav: NavController, public squadData: SquadData, public profileData: ProfileData) {

    /**
     * I do all my initialization here and call the function after getting all the messages.
     */
    this.scrollChatToBottom();

  }

  scrollChatToBottom(){
    this.chatScroll.scrollToBottom(200);
  }

  sendMessage(message, squad, firstName){
    this.squadData.sendMessage(message, squad, firstName).then( message => {
      this.messageToSend = '';
      this.scrollChatToBottom();
    }, error => {
      console.log(error);
    });
  }
}

Problem here is that I get a TypeError: this.chatScroll.scrollToBottom is not a function

Any ideas how I can get this to work?

1 Like
2

You’re trying to call a component method before it has fully rendered. You need to wait and call it after the view is fully loaded and all the elements have been created.

export class HomePage {
  @ViewChild(Content) content: Content;

  constructor() {
  }

  ionViewDidEnter() {
    this.content.scrollToBottom();
  }
}
2 Likes
3

Hi @mhartington

That would work on the Content part, but I’m actually trying to use something like scrollToBottom() on an <ion-scroll>

Like I said in the original post, I’m trying to apply the logic from the Content docs there, is there a way to do that with an <ion-scroll>

For a bit of context: I have 2 <ion-scroll> inside an <ion-content> since my client needed 2 scrollable divs on the screen, one to show something like progress updates from users and the bottom one for a chat, since chat messages UI usually shows latest chat messages to the bottom I’d like to have that ion-scroll always scrolled to the bottom instead of it’s regular state of always scrolled to the top.

Cheers!

4

If you look at the docs, and the source, you’ll see that ionScroll does not have those methods

5

So, the only way to make my use case work would be to have the chat occupy the entire <ion-content> instead of an <ion-scroll>?

6

I’m having the same issue, how do i scroll to bottom with ion-scroll , any idea everyone ? :slight_smile:

7

ion-scroll doesn’t have those methods, you’ll need to use them inside the ion-content

8

Yes , i see , but i also need the chat to be part of the page same as you :smile:

9

@javebratt Did you figure this out? I did hit the same issue / limitation. Ion-scroll does not currently have a method that will scroll to bottom.

Did you figure something out?

Thanks

10

Try something like this guys for an ion-scroll element:

@ViewChild('chatScroll') chatScroll: Scroll;

this.chatScroll.scrollElement.scrollTop = this.chatScroll.scrollElement.scrollHeight;
1 Like
11

I tried, but the ion-scroll just didn’t have the methods, so I went with 2 pages instead of one for that app and used ScrollToBottom inside an ion-content

12

If you want I ended up finding a workaround for it, it’s not bad actually.

I added an ion-label to the bottom of my repeating list (i.e. chat messages for example)

<ion-label id="myLabel">&nbsp;</ion-label>

And in the code where you need to call “ScrollToBottom()”:

ScrollToBottom(){
    var element = document.getElementById("myLabel");
    // I can't remember why I added a short timeout, 
    // but you might be able to use ngzone instead.
    // the below works great though. 
    setTimeout(()=>{element.scrollIntoView(true)},200); 
}
5 Likes
13

Thanks @tonyawad88
It’s working

14

Glad it helped :slight_smile:

1 Like
15

Thanks a lot @tonyawad88 ! works great !
All the information I found about it was using ion-content…
Seems weird for me that ion-scroll doesn’t have those basics methods …

1 Like
16

For ionic 3.6, you can pass the scroll object to below method:

view.html

<ion-scroll #chatScroll scrollY="true" >
    <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
    <p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</ion-scroll>
<a (click)="goBottomBtnClick()">GO BOTTOM</a>

view.ts

@ViewChild('chatScroll') chatScroll: Scroll;

...

export class OrderListPage {
  @ViewChild('chatScroll') chatScroll: any;

...

  public scrollToTop(scroll) {
    //credit to: https://stackoverflow.com/questions/44099796/how-can-i-use-content-scrollto-for-ion-scroll-in-ionic2
    //scroll: this.chatScroll._scrollContent.nativeElement
    scroll.scrollTop = 0;
  }

  public scrollToBottom(scroll) {
    scroll.scrollTop = scroll.scrollHeight - scroll.clientHeight;
  }

  goBottomBtnClick() {
     this.scrollToBottom(this.chatScroll._scrollContent.nativeElement);
  }
}
1 Like
17

Great :wink: awesome trick!

1 Like
18

I have an app to load some data from the remote source and implement an automatic scrolling.
When scrolling touches the bottom it has to start again from the top and again start to scroll down. This process has to continue.

How can I do this process?

can anyone please help me…?

19

Thank you! Worked nicely

20

I used below code …

  @ViewChild(Content) content: Content;

  scrollToBottom() {
    setTimeout(() => {
      if (this.content != null && this.content._scroll != null) {
        this.content.scrollToBottom();
      }
    }, 100);
  }
2 Likes