Fix #2042 - Add scroll-snap like behaviour on landing page

Seneca-CDOT · Apr 7, 2021 · 5f1dfc5 · 5f1dfc5
1 parent ea72193
commit 5f1dfc5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 11 deletions.
diff --git a/src/web/package.json b/src/web/package.json
@@ -14,6 +14,7 @@
     "@material-ui/icons": "^4.11.2",
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^10.1.3",
+    "@types/smoothscroll-polyfill": "^0.3.1",
     "dotenv": "^8.2.0",
     "highlight.js": "10.7.2",
     "jwt-decode": "^3.1.2",
@@ -24,6 +25,7 @@
     "react-dom": "^17.0.2",
     "react-material-ui-form-validator": "^2.1.4",
     "react-use": "^17.2.1",
+    "smoothscroll-polyfill": "^0.4.4",
     "swr": "^0.5.5",
     "valid-url": "^1.0.9"
   },

diff --git a/src/web/src/components/Banner.tsx b/src/web/src/components/Banner.tsx
@@ -1,9 +1,16 @@
-import { useEffect, useState } from 'react';
-import { makeStyles, Theme, createStyles, Fab, Typography } from '@material-ui/core';
+import { useEffect, useState, useRef } from 'react';
+import {
+  makeStyles,
+  Theme,
+  createStyles,
+  Typography,
+  useScrollTrigger,
+  Fab,
+} from '@material-ui/core';
+import smoothscroll from 'smoothscroll-polyfill';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import { telescopeUrl } from '../config';
 import BannerDynamicItems from './BannerDynamicItems';
-import ScrollAction from './ScrollAction';
 import LandingButtons from './BannerButtons';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -91,6 +98,37 @@ export default function Banner() {
     version: '',
   });
 
+  const timelineAnchor = useRef<HTMLDivElement>(null);
+  const bannerAnchor = useRef<HTMLDivElement>(null);
+
+  const toTimelineTrigger = useScrollTrigger({
+    threshold: 50,
+    disableHysteresis: true,
+  });
+  const toBannerTrigger = !useScrollTrigger({
+    threshold: (timelineAnchor.current?.offsetTop || 0) - 50,
+    disableHysteresis: true,
+  });
+
+  useEffect(() => {
+    if (window) {
+      // Apply smooth scroll polyfill on mobile
+      smoothscroll.polyfill();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (toTimelineTrigger && timelineAnchor?.current) {
+      timelineAnchor.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [toTimelineTrigger]);
+
+  useEffect(() => {
+    if (toBannerTrigger && bannerAnchor?.current) {
+      bannerAnchor.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [toBannerTrigger]);
+
   useEffect(() => {
     async function getGitData() {
       try {
@@ -108,11 +146,11 @@ export default function Banner() {
       }
     }
     getGitData();
-  }, [telescopeUrl]);
+  }, []);
 
   return (
     <>
-      <div className={classes.heroBanner}>
+      <div className={classes.heroBanner} ref={bannerAnchor}>
         <BannerDynamicItems />
         <LandingButtons />
       </div>
@@ -134,13 +172,11 @@ export default function Banner() {
         >
           v {gitInfo.version}
         </a>
-        <ScrollAction>
-          <Fab color="primary" aria-label="scroll-down">
-            <KeyboardArrowDownIcon className={classes.arrowDownIcon} />
-          </Fab>
-        </ScrollAction>
+        <Fab color="primary" aria-label="scroll-down">
+          <KeyboardArrowDownIcon className={classes.arrowDownIcon} />
+        </Fab>
       </div>
-      <div className={classes.anchor} id="posts-anchor" />
+      <div className={classes.anchor} id="posts-anchor" ref={timelineAnchor} />
     </>
   );
 }