Ionic - Scroll to a particular element Virtual Scroll

Question

i have the following code.

home.html:

<ion-list [virtualScroll]="newDates" approxItemHeight="50px">
<ion-item *virtualItem="let date" id="i">
{{date.holiday}}
</ion-item>
</ion-list>

home.ts:

scrollTo(){
let yOffset = document.getElementById('25').offsetTop;
this.content.scrollTo(0, yOffset);
}

For Example i have to scroll down to i=25

The following method works for normal list without VirtualScroll.

VirtualScroll doesnt display the elements which are not seen on the view hence we get an error yOffset is null

score 2 · Accepted Answer · answered May 07 '18 at 09:45

2

The virtual scroll component that the ionic contains is a very strange and bug-filled component. In an app I've even developed I tried to use it, but I ended up preferring to use angular2-virtual-scroll. I think you could try this component instead of the current one you are using.

answered May 07 '18 at 09:45

Marco Túlio

106
4

Will this serve my purpose? i running on tight schedule to try out now – Akash Mahale May 07 '18 at 10:14
Yes, will serve very well your purpose. It is very easy to implement and has a very nice documentation. – Marco Túlio May 07 '18 at 17:41

score 0 · Answer 2 · answered Jul 21 '21 at 12:09

I know this is an old thred but I was unable to find the answer to the same question so I will post my answer. The scrollTo element does not work because the element does not exist yet on the page. Only the visible ones exit in the DOM witch is the whole idea behind virtual scrolling I think. So here is how I more or less solved the problem:

y = 0;
@ViewChild(IonContent) content: IonContent;

async scrollTo(elementId: string) {
  if (!document.getElementById(elementId)) { 
    await this.content.scrollToPoint(0, this.y, 0);
    setTimeout(() => {
      this.y = this.y + 100;
      return this.scrollTo(elementId);
    }, 0);
  }
  if (document.getElementById(elementId)) { 
    document.getElementById(elementId).scrollIntoView(); 
  }
}

Basically the function scrolls down 100 px checks if the element exists and if now scrolls down more untill it finds it. I am sure there is more to be added like what if it reached the end if the list and didn't find the element...it will probably go in a infinite loop... Nevertheless this might serve somebody... Cheers!

Ionic - Scroll to a particular element Virtual Scroll

2 Answers2