# VirtualScroll not working?

**URL:** <https://forum.ionicframework.com/t/virtualscroll-not-working/65016>\
**Category:** ionic-v3\
**Created:** [September 29, 2016, 2:45pm UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016 "2016-09-29T14:45:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![livewireml](https://avatars.discourse-cdn.com/v4/letter/l/d9b06d/32.png) [@livewireml](https://forum.ionicframework.com/u/livewireml)\
**Post date:** [September 29, 2016, 2:45pm UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/1 "2016-09-29T14:45:48Z")

</div>

Has anyone gotten VirtualScroll to work on Ionic 2 RC 0? It is not working for me. I tried to just make the simplest possible code to demonstrate the functionality. Am I missing something or does it just not work?

Thanks,

HTML:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/1/e/1e386e235b8a9608265f67abae53845940ee5bc4.png)

TS:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/8/8/88091eaca3681976f5c3eefc9831b4ec06e4af47.png)

Console Error:  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/8/9/89889c7c3b90eb193245cd99b1cfc1b3e6f33b6f.png)

---

<div class="post-metadata">

**Author:** ![LAFONT](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@LAFONT](https://forum.ionicframework.com/u/LAFONT)\
**Post date:** [September 29, 2016, 4:10pm UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/2 "2016-09-29T16:10:17Z")

</div>

Hello,

I have problems with virtual scroll too. I have the following error in chrome:

> ```
> polyfills.js:3 Unhandled Promise rejection: Template parse errors:
> Can't bind to 'virtualTrackBy' since it isn't a known property of 'ion-card'.
> 1. If 'ion-card' is an Angular component and it has 'virtualTrackBy' input, then verify that it is part of this module.
> 2. If 'ion-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
> (" (click)="ViewArticle($event, article, null)"
> 
> ```

> ```
> [ERROR ->][virtualTrackBy]="id"
> 
> ```

I try to isolate the problem.

If anyone make the virtual scroll to work, that would be a clue.

---

<div class="post-metadata">

**Author:** ![LAFONT](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@LAFONT](https://forum.ionicframework.com/u/LAFONT)\
**Post date:** [September 29, 2016, 4:54pm UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/3 "2016-09-29T16:54:55Z")

</div>

With a blank project, i have the same error:

> EXCEPTION: Error in ./ContactPage class ContactPage - inline template:9:2 caused by: Cannot read property ‘indexOf’ of undefined  
> ORIGINAL EXCEPTION: Cannot read property ‘indexOf’ of undefined  
> ORIGINAL STACKTRACE:  
> TypeError: Cannot read property ‘indexOf’ of undefined

Template:

> ```
> <ion-list [virtualScroll]="items">
> <ion-list-header>Follow us on Twitter</ion-list-header>
> <ion-item *virtualItem="let item">
> <ion-icon name="ionic" item-left></ion-icon>
> {{item}}
> </ion-item>
> 
> ```

Component:

```
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'contact.html'
})
export class ContactPage {

  public items: Array<string> = [];

  constructor(public navCtrl: NavController) {
    for(let i = 0; i < 100; i++)
    {
      this.items.push('name' +i);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![LAFONT](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@LAFONT](https://forum.ionicframework.com/u/LAFONT)\
**Post date:** [September 29, 2016, 5:14pm UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/4 "2016-09-29T17:14:25Z")

</div>

I have posted an issue about this:

> <https://github.com/ionic-team/ionic/issues/8311>

---

<div class="post-metadata">

**Author:** ![LAFONT](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@LAFONT](https://forum.ionicframework.com/u/LAFONT)\
**Post date:** [September 30, 2016, 8:38am UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/5 "2016-09-30T08:38:33Z")

</div>

If someone have a workaround, it will be great.

---

<div class="post-metadata">

**Author:** ![LAFONT](https://avatars.discourse-cdn.com/v4/letter/l/b38774/32.png) [@LAFONT](https://forum.ionicframework.com/u/LAFONT)\
**Post date:** [September 30, 2016, 11:54am UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/6 "2016-09-30T11:54:15Z")

</div>

@livewireml : check github, there is workaround for your error.

---

<div class="post-metadata">

**Author:** ![livewireml](https://avatars.discourse-cdn.com/v4/letter/l/d9b06d/32.png) [@livewireml](https://forum.ionicframework.com/u/livewireml)\
**Post date:** [September 30, 2016, 1:14pm UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/7 "2016-09-30T13:14:16Z")

</div>

@LAFONT Thanks for posting the bug.

Yea, that workaround did fix my issue. I thought I had tried that fix before, but I guess I had another issue when I had tried it. But yea, the workaround described in the github did fix my error that I was receiving. The workaround was to just define approxItemHeight (such as approxItemHeight=“40px”) on the ion-list element.

---

<div class="post-metadata">

**Author:** ![andybeaulieu](https://avatars.discourse-cdn.com/v4/letter/a/5daacb/32.png) [@andybeaulieu](https://forum.ionicframework.com/u/andybeaulieu)\
**Post date:** [October 12, 2016, 1:19pm UTC](https://forum.ionicframework.com/t/virtualscroll-not-working/65016/8 "2016-10-12T13:19:56Z")

</div>

It looks like VirtualScroll doesn’t work in desktop browsers when dragging the scrollbar?

For example, doing an ionic serve to Chrome, and then using the scrollbar to quickly skip to an area of the list produces whitespace.

I did apply an appropriate approxItemHeight.