Ionic 3：以编程方式将离子滚动内容滚动到底部

Question

我有一个离子滚动组件

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

里面显示的文字继续增长（想想提词器的风格），最终增长到超过指定的离子卷轴高度；然后可以手动向下滚动容器。手动滚动效果很好，但是有没有办法以编程方式让它随着更多文本的添加而向下滚动？

Answer 1

在 Angular 2 或更高版本中尝试：

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
    }
}