Adding scroll event to capture vertical position

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;

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