From 2d681ee5f3f697757eee6ba596223dcaa6e32700 Mon Sep 17 00:00:00 2001 From: surajhell88 Date: Thu, 9 Apr 2020 13:30:10 +0530 Subject: [PATCH 1/4] Adding scroll event listener to capture scroll position. Also, adding throttle helper to minimise the calls to scroll function. --- client/helpers/throttle.ts | 18 ++++++++++++++++++ client/pages/Layout.tsx | 18 ++++++++++++++---- 2 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 client/helpers/throttle.ts diff --git a/client/helpers/throttle.ts b/client/helpers/throttle.ts new file mode 100644 index 00000000..75908b69 --- /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; \ No newline at end of file diff --git a/client/pages/Layout.tsx b/client/pages/Layout.tsx index 3d203047..a924f393 100644 --- a/client/pages/Layout.tsx +++ b/client/pages/Layout.tsx @@ -3,22 +3,32 @@ 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); } else { // scroll to top when user navigates to any post window.scrollTo(0, 0); } + const scrollEvent = throttle(() => { + if (pathname === '/') { + // save last known vertical scroll position + oldYOffsetValue = window.scrollY || window.pageYOffset; + } + }); + window.addEventListener('scroll', scrollEvent); + return function () { + window.removeEventListener('scroll', scrollEvent); + }; }, [pathname]); return ( From 61db26d43e4c406b7fb75656ce7318aee064a91f Mon Sep 17 00:00:00 2001 From: surajhell88 Date: Thu, 9 Apr 2020 13:37:46 +0530 Subject: [PATCH 2/4] Simplifying code for simplicity and better readability --- client/pages/Layout.tsx | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/client/pages/Layout.tsx b/client/pages/Layout.tsx index a924f393..598298bf 100644 --- a/client/pages/Layout.tsx +++ b/client/pages/Layout.tsx @@ -11,24 +11,20 @@ const Layout: React.FC<{}> = ({ children }) => { const { pathname } = useLocation(); useEffect(() => { + window.scrollTo(0, oldYOffsetValue); + // attach scroll event listener only when at home page if (pathname === '/') { - // scroll to last saved vertical scroll location - // when user navigates to home - window.scrollTo(0, oldYOffsetValue); - } else { - // scroll to top when user navigates to any post - window.scrollTo(0, 0); - } - const scrollEvent = throttle(() => { - if (pathname === '/') { + const scrollEvent = throttle(() => { // save last known vertical scroll position oldYOffsetValue = window.scrollY || window.pageYOffset; - } - }); - window.addEventListener('scroll', scrollEvent); - return function () { - window.removeEventListener('scroll', scrollEvent); - }; + }); + window.addEventListener('scroll', scrollEvent); + return function () { + // detach scroll listener + oldYOffsetValue = 0; + window.removeEventListener('scroll', scrollEvent); + }; + } }, [pathname]); return ( From 29013016fc6f5d24550c98875ccad5666b6fb6b6 Mon Sep 17 00:00:00 2001 From: surajhell88 Date: Thu, 9 Apr 2020 13:38:52 +0530 Subject: [PATCH 3/4] Adding new line at EOF --- client/helpers/throttle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/helpers/throttle.ts b/client/helpers/throttle.ts index 75908b69..1637164e 100644 --- a/client/helpers/throttle.ts +++ b/client/helpers/throttle.ts @@ -15,4 +15,4 @@ function throttle(callback: Function, wait = 500) { } } -export default throttle; \ No newline at end of file +export default throttle; From d7a66517c293b598390af58eb861dc192a3c1f88 Mon Sep 17 00:00:00 2001 From: surajhell88 Date: Thu, 9 Apr 2020 14:01:26 +0530 Subject: [PATCH 4/4] Reshuffling some code to separate logic for home and page routes --- client/pages/Layout.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/client/pages/Layout.tsx b/client/pages/Layout.tsx index 598298bf..4981f7f4 100644 --- a/client/pages/Layout.tsx +++ b/client/pages/Layout.tsx @@ -11,9 +11,10 @@ const Layout: React.FC<{}> = ({ children }) => { const { pathname } = useLocation(); useEffect(() => { - window.scrollTo(0, oldYOffsetValue); - // attach scroll event listener only when at home page if (pathname === '/') { + // scroll to last saved vertical scroll location + // when user navigates to home + window.scrollTo(0, oldYOffsetValue); const scrollEvent = throttle(() => { // save last known vertical scroll position oldYOffsetValue = window.scrollY || window.pageYOffset; @@ -21,9 +22,11 @@ const Layout: React.FC<{}> = ({ children }) => { window.addEventListener('scroll', scrollEvent); return function () { // detach scroll listener - oldYOffsetValue = 0; window.removeEventListener('scroll', scrollEvent); }; + } else { + // scroll to top when user navigates to any post + window.scrollTo(0, 0); } }, [pathname]);