Sandrina Pereira Sandrina Pereira - 4 months ago 837
Javascript Question

ionic 2 + angular 2 : auto scroll to bottom of list / page / chat

I'm trying to code a page with two segments "chat" and "content". I want that one "chat" segment the page auto-scroll to the bottom with no effect. The chat is a

<ion-list>
with several
<ion-item>
.

<ion-list>
<ion-item> item 1 </ion-item>
<ion-item> item 2 </ion-item>
....
<ion-item> item 20 </ion-item>
<ion-item> item 21 </ion-item> <!-- user should see directly this item on bottom of the page -->
</ion-list>


I'm using Javascript, not typescript, and I don't wan't to use jQuery.
Thanks :)
Plus, when I go to "content" segment and go back to "chat" I want to auto-scroll again the chat.

Answer

This should work if your ion-list element has a fixed height.

<ion-list id="item-list">
    <ion-item> item 1 </ion-item>
    <ion-item> item 2 </ion-item>
    [...]
    <ion-item> item 20 </ion-item>
    <ion-item> item 21 </ion-item>
</ion-list>

[...]

<script>
    var itemList = document.getElementById("item-list");
    itemList.scrollTop = itemList.scrollHeight
</script>
Comments