Disable `overflow-anchor` for virtualScrollDriver to work in Chrome correctly

DynamicVirtualScrollExample.js

@@ -54,9 +54,10 @@ export class DynamicVirtualScrollExample extends React.PureComponent
     {
         this.itemElements = [];
         return (<div style={{position: 'relative', width: '400px'}}>
-            <div style={{overflowY: 'scroll', height: '400px', width: '400px'}}
+            <div style={{overflowY: 'scroll', height: '400px', width: '400px', overflowAnchor: 'none', outline: 'none'}}
+                tabIndex="1"
                 ref={e => this.viewport = e}
-                onScroll={this.componentDidUpdate}>
+                onScroll={this.driver}>
                 <div style={{height: this.state.targetHeight+'px'}}>
                     {this.useFixedHeader
                         ? <div style={{height: '30px'}}></div>
@@ -90,8 +91,7 @@ export class DynamicVirtualScrollExample extends React.PureComponent
         </div>);
     }
 
-    // We should re-render only when we know we need some items that are not currently rendered
-    componentDidUpdate = () =>
+    driver = () =>
     {
         const newState = virtualScrollDriver(
             {
@@ -107,6 +107,11 @@ export class DynamicVirtualScrollExample extends React.PureComponent
         this.setStateIfDiffers(newState);
     }
 
+    componentDidUpdate = () =>
+    {
+        this.driver();
+    }
+
     componentDidMount()
     {
         this.componentDidUpdate();

README.md

@@ -61,6 +61,8 @@ What to do with it:
   * `newState.middleItemCount` - item count to be renderer after top placeholder. omit items if it is 0
   * `newState.middlePlaceholderHeight` - height of the second (middle) placeholder. omit placeholder if it is 0
   * `newState.lastItemCount` - item count to be rendered in the end of the list
+* also note that you MUST set `overflow-anchor: none` on your scroll container. You'll end up with
+  `virtualScrollDriver()` not able to finish updating in Chrome if you don't.
 
 # Usage example with React