diff --git a/client/helpers/throttle.ts b/client/helpers/throttle.ts new file mode 100644 index 00000000..1637164e --- /dev/null +++ b/client/helpers/throttle.ts @@ -0,0 +1,18 @@ +let throttleTimeout: any = null; + +function throttle(callback: Function, wait = 500) { + return function () { + if (wait) { + if (throttleTimeout === null) { + throttleTimeout = setTimeout(() => { + callback(); + throttleTimeout = null; + }, wait) + } + } else { + callback(); + } + } +} + +export default throttle; diff --git a/client/pages/Layout.tsx b/client/pages/Layout.tsx index 3d203047..4981f7f4 100644 --- a/client/pages/Layout.tsx +++ b/client/pages/Layout.tsx @@ -3,18 +3,27 @@ import { Link, useLocation } from 'react-router-dom'; import Filter from '../components/Filter'; import Footer from './Footer'; +import throttle from '../helpers/throttle'; + +let oldYOffsetValue = 0; const Layout: React.FC<{}> = ({ children }) => { - let oldYOffsetValue = 0; const { pathname } = useLocation(); useEffect(() => { - // save last known vertical scroll position - oldYOffsetValue = window.pageYOffset; if (pathname === '/') { // scroll to last saved vertical scroll location // when user navigates to home - window.scrollTo(0, oldYOffsetValue) + window.scrollTo(0, oldYOffsetValue); + const scrollEvent = throttle(() => { + // save last known vertical scroll position + oldYOffsetValue = window.scrollY || window.pageYOffset; + }); + window.addEventListener('scroll', scrollEvent); + return function () { + // detach scroll listener + window.removeEventListener('scroll', scrollEvent); + }; } else { // scroll to top when user navigates to any post window.scrollTo(0, 0);