CODEWITHSUNDEEP
typescriptionic-frameworkionic3
Tristan
Tristan

Reputation: 1790

Scroll Div to Bottom in Ionic

I have an ionic page in which I have a scrollable 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>

The class of the div:

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

I want to automatically scroll to the bottom of the div when the page loads and also when a new item is added to the list.

So far I have tried to use @ViewChild('list') list:any; to get the element. Then:

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

and

this.list.scrollToBottom(100);

But scrollTop just does not work. scrollToBottom threw an error that stated scrollToBottom was not a function.

How can I scroll to the bottom of the div?

Upvotes: 1

Views: 2530

Answers (1)

Prashant
Prashant

Reputation: 1385

try to add [scrollTop] to Template side. I found it easier to implement.

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

Upvotes: 6

Related Questions