0

I have a list of people that I am looping through. Each person has their own ion-item. The list has scrollbars so I can scroll up and down and see all the people.

Using typescript, how can I scroll to the bottom of the list? When the page loads I see the people from the top but would like to call a function that jumps me to the bottom of the list.

<ion-slide class="add-scrollbars">          
    <ion-list>
      <ion-item *ngFor="let p of gameData?.points">
        <h2><strong>{{ p.name }}</strong></h2>
      </ion-item>
    </ion-list> 
</ion-slide>

My CSS to add the scrollbars ...

.add-scrollbars {
    overflow-y: scroll; 
}

My list is being updated constantly and I want to have a function that I can call when there's an update that will jump me to the bottom of the list .... but quite often I will have scrolled up and currently don't see new entries being added to the bottom

Chris
  • 4,672
  • 13
  • 52
  • 93
  • You may wish to add tags other than `typescript` to get more eyes on the question. For instance, `ionic` is the framework that uses the `ion` prefix, if I'm not mistaken. Also, this appears to be `angular`. – Heretic Monkey Mar 09 '18 at 14:27
  • Just curious: you don't want to reverse the order of the list instead of scrolling automatically to the end? – ConnorsFan Mar 09 '18 at 14:34
  • Unfortunately not. My list is being updated constantly and I want to have a function that I can call when there's an update that will jump me to the bottom of the list .... but quite often I will have scrolled up and currently don't see new entries being added to the bottom – Chris Mar 09 '18 at 14:36
  • I saw in [other posts](https://stackoverflow.com/q/37415085/1009922) that some ionic components have a `scrollToBottom` method. Did you try calling that on the `ion-slide` element? – ConnorsFan Mar 09 '18 at 15:04

0 Answers0