Question

我有一个离子页面，其中有一个可滚动的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的底部？

Answer 1

尝试将[scrollTop]添加到Template侧。我发现它更容易实现。

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

在离子状态下将Div滚动到底部

1 个答案: