Прокрутить Div до нижнего уровня в Ionic

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] в сторону шаблона. Мне было проще это реализовать.

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