Page 1 of 1

Programmatic scroll to ion-card

Posted: Sun Aug 23, 2020 9:25 pm
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?


Re: Programmatic scroll to ion-card

Posted: Mon Aug 24, 2020 4:36 pm
by Serhii Kulibaba

Hello,

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


Re: Programmatic scroll to ion-card

Posted: Mon Aug 24, 2020 6:40 pm
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.