Ionic 3: programmatically scroll ion-scroll content to bottom

Question

I have an ion-scroll component

<ion-scroll scrollY="true" style="height: 52vh;">
  {{ text }}
</ion-scroll>

The text displayed inside continues to grow (think teleprompter style), and eventually grows to be longer than the specified ion-scroll height; the container can then be manually scrolled down. The manual scrolling works fine, but is there a way to programmatically make it scroll down as more text gets added?

Have a look at this answer: https://stackoverflow.com/a/35278480/7088500 — skm, Sep 19 '17 at 04:10
@skm Thanks, it worked when i replaced the ion-scroll with a div, like in that answer. — Kevin Shi, Sep 19 '17 at 04:25
Possible duplicate of [angular2 scroll to bottom (chat style)](https://stackoverflow.com/questions/35232731/angular2-scroll-to-bottom-chat-style) — Suraj Rao, Sep 19 '17 at 05:10

score 2 · Answer 1 · answered Jul 27 '18 at 20:11

Try in Angular 2 or higher:

page.html

  <div class="scroll" #scrollMe (change)="scrollToBottom()">
    {{ text }}
  </div>

page.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Content } from 'ionic-angular';

...

export class Page {

  @ViewChild('scrollMe') scrollElement: ElementRef;

  public text: String = '';

  constructor(){}

  ionViewDidLoad() {
    this.appendText();
  }

  // append text (loop...)
  appendText() {
    setTimeout( ()=> {
      this.text += 'Append more text ';
      this.appendText();
    }, 100);
  }

  // scroll to bottom (div element)
  scrollToBottom() {
    setTimeout( ()=> {
      this.scrollElement.nativeElement.scrollTop = this.scrollElement.nativeElement.scrollHeight;
    }, 50);
  }
}

page.scss

page {
    .scroll {
        max-height: 200px; // for example
        overflow-y: scroll; // show vertical scroll
    }
}

Ionic 3: programmatically scroll ion-scroll content to bottom

1 Answers1