Fix scroll position history enhancers

Author: taion

modules/useScrollToTopBehavior.js

@@ -4,12 +4,10 @@ export default function useScrollToTopBehavior(createHistory) {
   return function (options) {
     const history = createHistory(options)
 
-    history.listen(function (location) {
-      if (location.action === 'POP') {
-        return
-      }
-
-      setWindowScrollPosition(0, 0)
+    history.listen(() => {
+      // Need to defer this to after other listeners fire in case some of them
+      // update the page.
+      setTimeout(() => setWindowScrollPosition(0, 0))
     })
 
     return history

modules/useStandardScrollBehavior.js

@@ -0,0 +1,62 @@
+import { readState, saveState } from 'history/lib/DOMStateStorage'
+import { addEventListener, getWindowScrollPosition, setWindowScrollPosition }
+  from './DOMUtils'
+
+export default function useStandardScrollBehavior(createHistory) {
+  return function (options) {
+    const history = createHistory(options)
+
+    let currentLocation
+    let savePositionHandle = null
+
+    addEventListener(window, 'scroll', () => {
+      if (savePositionHandle !== null) {
+        clearTimeout(savePositionHandle)
+      }
+
+      savePositionHandle = setTimeout(() => {
+        savePositionHandle = null
+
+        if (!currentLocation) {
+          return
+        }
+        const { key } = currentLocation
+
+        const state = readState(key)
+        saveState(key, {
+          ...state, scrollPosition: getWindowScrollPosition()
+        })
+      })
+    })
+
+    history.listenBefore(() => {
+      if (savePositionHandle !== null) {
+        clearTimeout(savePositionHandle)
+        savePositionHandle = null
+      }
+    })
+
+    function getScrollPosition() {
+      const state = readState(currentLocation.key)
+      if (!state) {
+        return null
+      }
+
+      return state.scrollPosition
+    }
+
+    history.listen(location => {
+      currentLocation = location
+
+      const scrollPosition = getScrollPosition() || {}
+      const { x = 0, y = 0 } = scrollPosition
+
+      // Need to defer the scroll operation because this listener fires before
+      // e.g. the router updates its state, and this might need to scroll past
+      // the end of the page pre-transition if the popped page was longer.
+      setTimeout(() => setWindowScrollPosition(x, y))
+    })
+
+    return history
+  }
+}