CODEWITHSUNDEEP
scrollionic4
Moblize IT
Moblize IT

Reputation: 1328

Ionic4 scrollToBottom has no effect

I am following https://www.joshmorony.com/automatic-scroll-to-bottom-chat-interface-with-mutation-observers-in-ionic/ to try to scroll but it has no effect.

i am not yet using mutable observable part. and based on the post that should only skip the last message only from scroll in some cases. but in my case scrolling does not happen at all. I have checked console and no error there either

My code looks like below:

<ion-content fullscreen>
<div class="full-screen-bg">
    <div style="border-top: 1px solid #5b63f8">
            <ion-segment (ionChange)="segmentChanged($event)" mode="md" style="padding-top:15px;padding-bottom: 0px" value="feed">
                    <ion-segment-button value="feed">
                      FEED
                    </ion-segment-button>
                    <ion-segment-button value="explore">
                      EXPLORE
                    </ion-segment-button>
            </ion-segment>

            <div [ngSwitch]="eventTab">
                <div *ngSwitchCase="'feed'" >
                    <ion-list *ngIf="messages" lines="full" style="background:transparent" #content>
                    <ion-item  style="padding-top:10px;" *ngFor="let msg of messages | async;let last = last ">
                        <ion-row  style="width:100%;">
                            <ion-col size="3">
                                <ion-row>
                                    <ion-col class="sg-reg-text">{{formatName(msg.name)}}</ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col style="padding:0;padding-left:8px" class="sg-tiny-text"><ion-icon name="time" color="light"></ion-icon>&nbsp;{{timeSince(msg.date)}}</ion-col>
                                </ion-row>
                            </ion-col>
                            <ion-col style="border-bottom: 1px solid #7e7c8d;padding-bottom: 10px">
                                <ion-row>
                                    <ion-col class="sg-reg-text">{{msg.message}}</ion-col>
                                </ion-row>
                            </ion-col>
                        </ion-row>

                    </ion-item>
              </ion-list>
            </div>
            <div *ngSwitchCase="'explore'" style="padding:40px">
</ion-content>

.ts file

 @ViewChild(Content) contentArea: Content; 

  messages:Observable<Post[]>

send(){
console.log("posting:" + this.message)

if(this.message == undefined || this.message.trim() == '')
  return

var post = new Post(this.core.name, this.message, this.core.uid, (new Date()).getTime())

this.sgSvc.postMessage(post).then(
  (rsp) =>  {
              console.log('success')
              this.message = ''
              this.scrollToBottom();

  }
)
  }

scrollToBottom() {
  setTimeout(() => {
if (this.contentArea.scrollToBottom) {
  this.contentArea.scrollToBottom();
}
  }, 400);
}

Upvotes: 1

Views: 1627

Answers (3)

Devner
Devner

Reputation: 7245

Most of your code is fine. You just need to do 3 changes and that should work for you, in Ionic 4. I tried your code using Ionic 4 and its working for me. Here are the changes:

Change 1 (TS FILE):

import {IonContent} from '@ionic/angular';

Change 2 (TS FILE):

Replace

@ViewChild(Content) contentArea: Content;

with:

@ViewChild(IonContent) contentArea: IonContent;

Change 3 (HTML FILE):

Replace:

<ion-content fullscreen>

with:

<ion-content fullscreen #contentArea>

Upvotes: 3

ACES
ACES

Reputation: 490

I was able to solve it by using this 

this.contentArea.el.scrollToBottom();

I hope it helps

Upvotes: 2

Jaykant Jha
Jaykant Jha

Reputation: 698

instead of this.contentArea.scrollToBottom();

use window.scrollTo(0,document.body.scrollHeight);

Upvotes: 0

Related Questions