fix(gatsby-react-router-scroll): debounce function for scollListener (#…

…26933) Co-authored-by: Ward Peeters <ward@coding-tech.com>
gatsbyjs · Mar 1, 2021 · 2f40b0a · 2f40b0a
1 parent 002aae6
commit 2f40b0a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/e2e-tests/production-runtime/cypress/integration/scroll-behavior.js b/e2e-tests/production-runtime/cypress/integration/scroll-behavior.js
@@ -44,6 +44,7 @@ describe(`Scroll behaviour`, () => {
       expect(win.scrollY).not.to.eq(0, 0)
 
       cy.scrollTo(`bottom`)
+      cy.wait(500) // allow ScrollContext to update scroll position store
       cy.go(`back`).waitForRouteChange()
       cy.go(`forward`).waitForRouteChange()
 

diff --git a/packages/gatsby-react-router-scroll/src/scroll-handler.tsx b/packages/gatsby-react-router-scroll/src/scroll-handler.tsx
@@ -25,12 +25,29 @@ export class ScrollHandler extends React.Component<
 
   _stateStorage: SessionStorage = new SessionStorage()
 
+  // @see https://www.html5rocks.com/en/tutorials/speed/animations/
+  _isTicking = false
+  _latestKnownScrollY = 0
   scrollListener = (): void => {
-    const { key } = this.props.location
+    this._latestKnownScrollY = window.scrollY
+
+    if (!this._isTicking) {
+      this._isTicking = true
+      requestAnimationFrame(this._saveScroll.bind(this))
+    }
+  }
+
+  _saveScroll(): void {
+    const key = this.props.location.key || null
 
     if (key) {
-      this._stateStorage.save(this.props.location, key, window.scrollY)
+      this._stateStorage.save(
+        this.props.location,
+        key,
+        this._latestKnownScrollY
+      )
     }
+    this._isTicking = false
   }
 
   componentDidMount(): void {