detect page bottom

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

web-app/src/containers/Tutorial/components/Level.tsx

@@ -15,7 +15,6 @@ const styles = {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     padding: 0,
-    paddingBottom: '5rem',
   },
 
   text: {

web-app/src/containers/Tutorial/components/ScrollContent.tsx

@@ -1,26 +1,70 @@
 import * as React from 'react'
 
+const styles = {
+  scrollIndicator: {
+    position: 'fixed' as 'fixed',
+    bottom: '2rem',
+  },
+}
+
 type Props = {
   item: string
   children: React.ReactElement
 }
 
 const ScrollContent = ({ item, children }: Props) => {
+  const [showScrollIndicator, setShowScrollIndicator] = React.useState(false)
   const pageTopRef: React.RefObject<any> = React.useRef(null)
-
   const pageBottomRef: React.RefObject<any> = React.useRef(null)
 
   const scrollToTop = () => {
     pageTopRef.current.scrollIntoView({ behavior: 'smooth' })
+    let hideTimeout: any
+
+    // API to detect if an HTML element is in the viewport
+    // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // show a scroll indicator to let the user know
+        // they can scroll down for more
+        const isVisible = !entry.isIntersecting
+        setShowScrollIndicator(isVisible)
+        if (!isVisible) {
+          hideTimeout = setTimeout(() => {
+            setShowScrollIndicator(false)
+          }, 3000)
+        }
+      },
+      {
+        rootMargin: '0px',
+      },
+    )
+
+    const showTimeout = setTimeout(() => {
+      // detect if bottom of page is visible
+
+      if (pageBottomRef.current) {
+        observer.observe(pageBottomRef.current)
+      }
+    }, 300)
+    return () => {
+      // cleanup timeouts & subs
+      observer.unobserve(pageBottomRef.current)
+      clearTimeout(showTimeout)
+      clearTimeout(hideTimeout)
+    }
   }
 
   React.useEffect(scrollToTop, [item])
 
+  console.log(`showScrollIndicator = ${showScrollIndicator}`)
+
   return (
     <>
       <div ref={pageTopRef} />
       {children}
-      <div ref={pageBottomRef} />
+      {showScrollIndicator ? <div style={styles.scrollIndicator}>MORE</div> : null}
+      <div ref={pageBottomRef}>BOTTOM</div>
     </>
   )
 }

web-app/src/containers/Tutorial/index.tsx

@@ -16,6 +16,9 @@ import Continue from './components/Continue'
 import ScrollContent from './components/ScrollContent'
 
 const styles = {
+  page: {
+    paddingBottom: '5rem',
+  },
   header: {
     display: 'flex' as 'flex',
     alignItems: 'center',
@@ -113,7 +116,7 @@ const TutorialPage = (props: PageProps) => {
 
   return (
     <div>
-      <div>
+      <div css={styles.page}>
         <div css={styles.header}>
           <a onClick={() => setMenuVisible(!menuVisible)}>
             <Icon type="toggle-left" size="small" style={{ color: '#333' }} />