Programmatic scroll to ion-card

Moderator: Support

brendanm@ite.co.za
Posts: 22
Joined: Mon Jul 27, 2020 12:05 pm

Programmatic scroll to ion-card

Post by brendanm@ite.co.za »

I have a large number of ion cards omy my Ionic 4 page. Each one has a unqiue id. I want to programatically be able to scroll the ion-content so that a card with a certain id comes into view. In my page TS I can idenfity the ion-content and the ion-card with document.getElementById('xyz')). I can get the card's offsetTop but I have no luck when calling the .scrollTo method. on the ion-content to move to that Y position. Also tried scrollBy but that also did not work. Is there a manner that this can be done?

Serhii Kulibaba
Posts: 147
Joined: Tue Aug 27, 2013 1:47 pm

Re: Programmatic scroll to ion-card

Post by Serhii Kulibaba »

Hello,

Please see this example of how to make scrolls in the Ionic 4 application: https://ionicframework.com/docs/api/content

brendanm@ite.co.za
Posts: 22
Joined: Mon Jul 27, 2020 12:05 pm

Re: Programmatic scroll to ion-card

Post by brendanm@ite.co.za »

I have seen that example (and others) but could not get it to work in page typescript.

In typescript the:

document.querySelector('ion-content')

returns an 'element' BUT that does not have the method 'scrollToBottom'.

So basically the problem is that I can get hold of the ion-content element but cannot do much with it.

I have attached a modified verison of your List sample plugin which shows the issue more clearly.

Attachments
TEST1.zip
(21.05 KiB) Downloaded 12 times
Post Reply