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

Co-authored-by: Ward Peeters <[email protected]>

Author: ahmetcanaydemir

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()
 

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 {