Rendering problems when scrolling fast

I have a bug that can be best described by the video: https://youtu.be/tRR0EIifrX4 It happens in Chrome, Mac OS. When a cursor is over a scrollbar (or when I scroll by dragging a slider instead of using trackpad or mouse), there is no problem. But if it somewhere over a list, strange things happening.

ReactList is created like this:

<ReactList itemRenderer={this.renderItem} length={this.state.friends.length} type="uniform" />;

It happens with type="variable" as well.

Any hint of how to fix it is highly appreciated.

[gch1p]

Suggested fix is not working for me in recent versions of chrome. So I invented a new one. The idea is that you attach wheel listener that cancels the event and updates scrollLeft and scrollTop properties of scrollable div. Example:

  onWheel = (e) => {
    e.preventDefault();
    this.scrollParent.scrollLeft += e.deltaX;
    this.scrollParent.scrollTop += e.deltaY;
    return false;
  }

[evgenyzinoviev]

I just accidentally found a solution! You have to attach mousewheel listener to the scrollable element. Just an empty listener. After that onscroll events will be fired synchronously.

Chrome, you are crazy.