Virtual scroll - bug on the official example

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Rows are not rendered when scrolling to the bottom of the table too fast with virtualization enabled.

Expected behavior Rows should be rendered properly even when scrolled fast.

Reproduction of the problem

1. Open http://swimlane.github.io/ngx-datatable/#virtual-scroll
2. Grab the scrollbar with your mouse and scroll to the bottom of the table.

Please tell us about your environment: Windows 10 64bit

• Table version:

• Angular version:

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome 80, Firefox 73.

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[Eloi-Marin]

I fixed the issue this way. Create a rxjs Subject:

scrollEvent: Subject<void> = new Subject();

then:

this.scrollEvent.pipe( debounceTime(100), map(_ => this.tableRef.offset), distinctUntilChanged(), ).subscribe(() => this.tableRef.element.getElementsByTagName(‘datatable-body’)[0].scrollTop++ );

and for the ngx-datatable scroll output, emit scrollEvent:

[html] (scroll)=“scrollEvent.next()”

Works pretty well with Angular 10.1.1 and ngx-datatable 18.0.0

[Hypercubed]

I have a PR coming that should fix the demo and give some improved details on implementation: https://github.com/swimlane/ngx-datatable/pull/1991