Improving detection of scroll ended

source/Grid/Grid.js

@@ -289,6 +289,7 @@ export default class Grid extends PureComponent {
     );
     this._onScroll = this._onScroll.bind(this);
     this._setScrollingContainerRef = this._setScrollingContainerRef.bind(this);
+    this._delayScrollEnded = this._delayScrollEnded.bind(this);
 
     this._columnWidthGetter = this._wrapSizeGetter(props.columnWidth);
     this._rowHeightGetter = this._wrapSizeGetter(props.rowHeight);
@@ -1036,21 +1037,33 @@ export default class Grid extends PureComponent {
     }
   }
 
+  /**
+   * Check if the difference between current time and the last scroll ended event is greater.
+   * than the scrollingResetTimeInterval prop, else schedule this function to execute again.
+   */
+  _delayScrollEnded() {
+    const { scrollingResetTimeInterval } = this.props;
+    if (Date.now() - this._scrollDebounceStart >= scrollingResetTimeInterval) {
+      this._debounceScrollEndedCallback();
+    } else {
+      this._disablePointerEventsTimeoutId = window.requestAnimationFrame(
+        this._delayScrollEnded
+      );
+    }
+  }
+
   /**
    * Sets an :isScrolling flag for a small window of time.
    * This flag is used to disable pointer events on the scrollable portion of the Grid.
    * This prevents jerky/stuttery mouse-wheel scrolling.
    */
   _debounceScrollEnded() {
-    const { scrollingResetTimeInterval } = this.props;
-
     if (this._disablePointerEventsTimeoutId) {
-      clearTimeout(this._disablePointerEventsTimeoutId);
+      window.cancelAnimationFrame(this._disablePointerEventsTimeoutId);
     }
-
-    this._disablePointerEventsTimeoutId = setTimeout(
-      this._debounceScrollEndedCallback,
-      scrollingResetTimeInterval
+    this._scrollDebounceStart = Date.now();
+    this._disablePointerEventsTimeoutId = window.requestAnimationFrame(
+      this._delayScrollEnded
     );
   }
 

source/Masonry/Masonry.jest.js

@@ -288,7 +288,6 @@ describe("Masonry", () => {
     });
 
     it("should be reset after a small debounce when scrolling stops", () => {
-      jest.useFakeTimers();
       const cellMeasurerCache = createCellMeasurerCache();
       const renderCallback = jest.fn().mockImplementation(index => index);
       const cellRenderer = createCellRenderer(
@@ -300,8 +299,9 @@ describe("Masonry", () => {
       );
       simulateScroll(rendered, 51);
       renderCallback.mockClear();
-      jest.runOnlyPendingTimers();
-      expect(renderCallback.mock.calls[0][1].isScrolling).toEqual(false);
+      setTimeout(() => {
+        expect(renderCallback.mock.calls[0][1].isScrolling).toEqual(false);
+      }, 0);
     });
   });
 

source/Masonry/Masonry.js

@@ -75,6 +75,7 @@ export default class Masonry extends PureComponent {
     );
     this._setScrollingContainerRef = this._setScrollingContainerRef.bind(this);
     this._onScroll = this._onScroll.bind(this);
+    this._delayScrollEnded = this._delayScrollEnded.bind(this);
   }
 
   clearCellPositions() {
@@ -290,16 +291,28 @@ export default class Masonry extends PureComponent {
     }
   }
 
-  _debounceResetIsScrolling() {
+  /**
+   * Check if the difference between current time and the last scroll ended event is greater.
+   * than the scrollingResetTimeInterval prop, else schedule this function to execute again.
+   */
+  _delayScrollEnded() {
     const { scrollingResetTimeInterval } = this.props;
+    if (Date.now() - this._scrollDebounceStart >= scrollingResetTimeInterval) {
+      this._debounceScrollEndedCallback();
+    } else {
+      this._disablePointerEventsTimeoutId = window.requestAnimationFrame(
+        this._delayScrollEnded
+      );
+    }
+  }
 
+  _debounceResetIsScrolling() {
     if (this._debounceResetIsScrollingId) {
-      clearTimeout(this._debounceResetIsScrollingId);
+      window.cancelAnimationFrame(this._debounceResetIsScrollingId);
     }
-
-    this._debounceResetIsScrollingId = setTimeout(
-      this._debounceResetIsScrollingCallback,
-      scrollingResetTimeInterval
+    this._scrollDebounceStart = Date.now();
+    this._debounceResetIsScrollingId = window.requestAnimationFrame(
+      this._delayScrollEnded
     );
   }
 

source/jest-setup.js

@@ -5,4 +5,4 @@ jest.mock("dom-helpers/util/scrollbarSize", () => {
 });
 
 // Polyfill requestAnimationFrame() for ReactDOMFrameScheduling
-global.requestAnimationFrame = require("raf");
+require("raf").polyfill();