在 Ionic 中将 Div 滚动到底部答案

【问题标题】：Scroll Div to Bottom in Ionic在 Ionic 中将 Div 滚动到底部
【发布时间】：2018-05-03 03:30:11
【问题描述】：

我有一个离子页面，其中有一个可滚动的 div。

<div #list class="main">
    <div class="row-container" *ngFor="let log of logs">
        <p class="log">{{log.guess}}  -  {{log.result}}</p>
        <div class="score-container">
            <ion-icon name="star" style="color: gold;"></ion-icon>
            <p class="score">{{log.score}}</p>
        </div>
    </div>
</div>

div的类：

.main {
    height: 90%;
    border-top: 1px solid black;
    overflow-y: scroll;
}

我想在页面加载时以及向列表中添加新项目时自动滚动到 div 的底部。

到目前为止，我已经尝试使用@ViewChild('list') list:any; 来获取元素。那么：

this.list.scrollTop = this.list.scrollHeight;

和

this.list.scrollToBottom(100);

但是scrollTop 只是不起作用。 scrollToBottom 抛出一个错误，指出 scrollToBottom 不是函数。

如何滚动到 div 的底部？

【问题讨论】：

el.scrollTop = el.scrollHeight;应该工作，你有什么错误？您的元素（列表）的类型是否正确？ list 应该是一个 HTMLElement 以使这些属性可用。
我记录了列表项，结果如下：ElementRef {nativeElement: div.main, scrollTop: undefined}
尝试将其转换为 HTMLElement。
我将@ViewChild('list') list:any; 更改为@ViewChild('list') list:HTMLElement;。没有变化

标签： typescript ionic-framework ionic3

【解决方案1】：

尝试将 [scrollTop] 添加到模板端。我发现它更容易实现。

<div #list class="main" [scrollTop]="list.scrollHeight">
<div class="row-container" *ngFor="let log of logs">
    <p class="log">{{log.guess}}  -  {{log.result}}</p>
    <div class="score-container">
        <ion-icon name="star" style="color: gold;"></ion-icon>
        <p class="score">{{log.score}}</p>
    </div>
</div>

【讨论】：