Tuesday 17 July 2018

Ionic scroll to item with Virtual Scroll

I have a list with big data.
In order to make the scrolling not lag, I am using Virtual Scroll, like this:

<ion-list [virtualScroll]="sections">
    <div  *virtualItem="let section" class="section" [attr.id]="section.chapterNum">
      <h4 *ngIf="section.Chapter !=''"></h4>
      <h5 [ngClass]="section.Section_Title"></h5>
      <div [innerHTML]="section.Section_Body | sanitizeHtml"></div>
    </div>
</ion-list>

I also have a need for jumping to specific parts of the list, which I did like this (before applying the Virtual Scroll):

GoToSection(chapter: number, section: string) {
    this.menuCtrl.close();
    var el = document.getElementsByClassName(section);
    let yOffset;
    for (var i = 0; i < el.length; i++) {
      if (+el[i].parentElement.id == chapter) {
        yOffset = (el[i] as HTMLElement).offsetTop;
      }
    }
    setTimeout(() => {
      this.content.scrollTo(0, yOffset, 0)
    }, 300);
}

However, when I try to use this method, it shows a blank screen, since it didn't render the scrolled element yet and couldn't find it.
Is there a different way to scroll to an element with Virtual Scroll?

If not, is there an alternative option to Virtual Scroll? (Infinite Scroll isn't an option)



from Ionic scroll to item with Virtual Scroll

No comments:

Post a Comment