open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Preserve scroll on back

Browse Source
This commit is contained in:
jahooma 2022-01-14 18:43:00 -06:00
parent 895eba4553
commit 9d44c40415
2 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/hooks/use-preserve-scroll.ts Normal file
View File

@ -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])
}

3
web/pages/_app.tsx
View File

@ -1,8 +1,11 @@
import 'tailwindcss/tailwind.css' import 'tailwindcss/tailwind.css'
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import Head from 'next/head' import Head from 'next/head'
import { usePreserveScroll } from '../hooks/use-preserve-scroll'
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
usePreserveScroll()
return ( return (
<> <>
<Head> <Head>