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

Ionic Framework ionic-v3
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 ;(

6

Same here, version:

"@ionic-native/core": "^5.5.0",
"@ionic-native/in-app-browser": "^5.5.0",
"@ionic-native/splash-screen": "^5.5.0",
"@ionic-native/status-bar": "^5.5.0",
"@ionic/angular": "^4.3.1",
"@ionic/pro": "2.0.4",
7

For me I used tried scrollTop and scrollIntoView along with @ViewChild() someID
e.g: in HTML

...
<div #someID>
...

and in my TS:

@ViewChild('someID') private someID: ElementRef;
...
lazyScroller() {
    // this scrolls to the bottom of the container
    this.someID.nativeElement.scrollTop = scrollPosition.scrollHeight - scrollPosition.clientHeight;
}

My guess is you might have forgotten to use nativeElement