From 135573f35b1cf44ad06662740ff0ac270c45501f Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Wed, 10 Oct 2018 02:28:21 +0300
Subject: [PATCH] Disable `overflow-anchor` for virtualScrollDriver to work in
 Chrome correctly

---
 DynamicVirtualScrollExample.js | 13 +++++++++----
 README.md                      |  2 ++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/DynamicVirtualScrollExample.js b/DynamicVirtualScrollExample.js
index 1417ce4..e3928f5 100644
--- a/DynamicVirtualScrollExample.js
+++ b/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();
diff --git a/README.md b/README.md
index 17f56bd..a57553a 100644
--- a/README.md
+++ b/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