[英]Ionic 3: programmatically scroll ion-scroll content to bottom
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?
手动滚动可以正常工作,但是有没有办法以编程方式使其随着添加更多文本而向下滚动?
Try in Angular 2 or higher: 在Angular 2或更高版本中尝试:
page.html page.html
<div class="scroll" #scrollMe (change)="scrollToBottom()">
{{ text }}
</div>
page.ts 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.scss
page {
.scroll {
max-height: 200px; // for example
overflow-y: scroll; // show vertical scroll
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.