virtualScroll scrollTo generates TypeError: Cannot read property 'scrollTop' of null


#1

Hi all,
New to Ionic here, just love it. SuperSample is fantastic… but I’m a bit lost and don’t know where to turn to at this point.

When using scrollTo on a virtualScroll content to jump far ahead in a large list, the list goes blank and the following error is generated

vScrollSegmentRangePage.html:25 ERROR TypeError: Cannot read property 'scrollTop' of null
    at VirtualScroll.scrollUpdate (virtual-scroll.ts:714)
    at SafeSubscriber.schedulerFn [as _next] (event_emitter.ts:121)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:254)
...
    at EventEmitterProxy.EventEmitter.emit (event_emitter.ts:80)
    at ScrollView.scroll.onScroll (content.ts:441)
    at ScrollView.setScrolling (scroll-view.ts:74)

scrollTo is called from a function bound to a vertical slider/range.
Sample code can be found at https://stackblitz.com/edit/ionic-list100k-segment-index
The current list has 10k items. Scolling from the navigator page is fine as it scrolls gradually.
But when I use the slider to go to the middle of the list for example, I get the above error, the list goes blank and never recovers.

Am I doing something wrong ?
Am I missing some parameters ?
Is this a bug ?

Tx for any input.
Martin


#2

@mpicard
try this. might fix your problem.

@ViewChild(VirtualScroll) listView: VirtualScroll;

private scrollTo(index: number) {
let key = ‘#customIds_’ + index;

let hElement: HTMLElement = this.content._elementRef.nativeElement;
let element = hElement.querySelector(key);
element.scrollIntoView();

//wait till scroll animation completes
setTimeout(() => {
    //resize it! otherwise will not update the bufferRatio
    this.listView.resize();
},500);

}

setTimeout(() => {
this.scrollTo(‘someId’);
}, 1000);


#3

Thanks for your suggestion @sujithsavithrybalan.
Tried it but same error on different object.
error
TypeError: Cannot read property 'scrollTop' of null
changed to
TypeError: Cannot read property 'scrollIntoView' of null

And the more I investigate it, I realize that it has nothing to do with how far ahead I scroll but HOW FAST I scroll.
If I bring the slider down one step at a time, it is fine.
If I bring the slider down fast then I get the error.


#4

Hi! Same problem here. Any idea on how to fix this?


#5

Haven’t looked at it in a while but the issue remains the same ;(