Preserve scroll on back

2022-01-14 18:43:00 -06:00 · 2022-01-14 18:43:00 -06:00 · 9d44c40415
commit 9d44c40415
parent 895eba4553
2 changed files with 44 additions and 0 deletions
--- a/web/hooks/use-preserve-scroll.ts
+++ b/web/hooks/use-preserve-scroll.ts
@ -0,0 +1,41 @@
+import { useRouter } from 'next/router'
+import { useEffect, useRef } from 'react'
+
+// From: https://jak-ch-ll.medium.com/next-js-preserve-scroll-history-334cf699802a
+export const usePreserveScroll = () => {
+  const router = useRouter()
+
+  const scrollPositions = useRef<{ [url: string]: number }>({})
+  const isBack = useRef(false)
+
+  useEffect(() => {
+    router.beforePopState(() => {
+      isBack.current = true
+      return true
+    })
+
+    const onRouteChangeStart = () => {
+      const url = router.pathname
+      scrollPositions.current[url] = window.scrollY
+    }
+
+    const onRouteChangeComplete = (url: any) => {
+      if (isBack.current && scrollPositions.current[url]) {
+        window.scroll({
+          top: scrollPositions.current[url],
+          behavior: 'auto',
+        })
+      }
+
+      isBack.current = false
+    }
+
+    router.events.on('routeChangeStart', onRouteChangeStart)
+    router.events.on('routeChangeComplete', onRouteChangeComplete)
+
+    return () => {
+      router.events.off('routeChangeStart', onRouteChangeStart)
+      router.events.off('routeChangeComplete', onRouteChangeComplete)
+    }
+  }, [router])
+}
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@ -1,8 +1,11 @@
 import 'tailwindcss/tailwind.css'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
+import { usePreserveScroll } from '../hooks/use-preserve-scroll'

 function MyApp({ Component, pageProps }: AppProps) {
+  usePreserveScroll()
+
  return (
    <>
      <Head>