use IntersectionObserver for tracking progress

this removes the scroll listener and enables progression tracking
via IntersectionObserver

Author: maerzhase

src/Scrollama.js

@@ -1,7 +1,17 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import DebugOffset from './DebugOffset';
 import { isOffsetInPixels } from './utils';
 
+const createThreshold = (theta, height) => {
+  const count = Math.ceil(height / theta);
+  const t = [];
+  const ratio = 1 / count;
+  for (let i = 0; i <= count; i += 1) {
+    t.push(i * ratio);
+  }
+  return t;
+};
+
 const TinyScrollama = props => {
   const {
     debug,
@@ -10,10 +20,12 @@ const TinyScrollama = props => {
     onStepEnter,
     onStepExit,
     onStepProgress,
+    threshold,
   } = props;
   const isOffsetDefinedInPixels = isOffsetInPixels(offset)
-  const [lastScrollTop, setLastScrollTop] = React.useState(0);
-  const [windowInnerHeight, setWindowInnerHeight] = React.useState(null);
+  const [lastScrollTop, setLastScrollTop] = useState(0);
+  const [windowInnerHeight, setWindowInnerHeight] = useState(null);
+
   const handleSetLastScrollTop = (scrollTop) => {
     setLastScrollTop(scrollTop);
   };
@@ -31,11 +43,14 @@ const TinyScrollama = props => {
     }
   }, []);
 
+  const innerHeight = (windowInnerHeight || window.innerHeight)
 
   const offsetValue = isOffsetDefinedInPixels 
-    ? (+offset.replace('px', '') / (windowInnerHeight || window.innerHeight))
+    ? (+offset.replace('px', '') / innerHeight)
     : offset;
 
+  const progressThreshold = useMemo(() => createThreshold(threshold, innerHeight), [innerHeight]);
+
   return (
     <React.Fragment>
       {debug && <DebugOffset offset={offset} />}
@@ -48,6 +63,7 @@ const TinyScrollama = props => {
           onStepProgress,
           lastScrollTop,
           handleSetLastScrollTop,
+          progressThreshold,
         });
       })}
     </React.Fragment>
@@ -58,6 +74,7 @@ TinyScrollama.defaultProps = {
   onStepProgress: null,
   onStepEnter: () => {},
   onStepExit: () => {},
+  threshold: 4,
 };
 
 export default TinyScrollama;

src/Step.js

@@ -5,6 +5,11 @@ const useRootMargin = offset => {
   return `-${offset * 100}% 0px -${100 - offset * 100}% 0px`;
 }
 
+const useProgressRootMargin = (direction, offset) => {
+  if (direction === 'down') return `${offset * 100}% 0px -${100 - offset * 100}% 0px`
+  return `-${offset * 100}% 0px ${offset * 100}% 0px`;
+}
+
 const Step = props => {
   const {
     children,
@@ -16,31 +21,48 @@ const Step = props => {
     onStepProgress,
     offset,
     scrollamaId,
+    progressThreshold,
   } = props;
+
+  const scrollTop = document.documentElement.scrollTop;
+  const direction = lastScrollTop < scrollTop ? 'down' : 'up';
+
+  const progressRootMargin = useProgressRootMargin(direction, offset);
   const rootMargin = useRootMargin(offset);
-  const [ref, entry] = useIntersectionObserver({
+
+  const [node, setNode] = React.useState(null);
+  const [isIntersecting, setIsIntersecting] = React.useState(false);
+
+  const [entry] = useIntersectionObserver({
     rootMargin,
     threshold: 0,
+    nodeRef: node,
+  });
+
+  const [scrollProgressEntry] = useIntersectionObserver({
+    rootMargin: progressRootMargin,
+    threshold: progressThreshold,
+    nodeRef: node,
   });
-  const [isIntersecting, setIsIntersecting] = React.useState(false);
 
-  const handleScroll = () => {
-    const { height, top } = entry.target.getBoundingClientRect();
-    const progress = Math.min(1, Math.max(0, (window.innerHeight * offset - top) / height));
 
-    onStepProgress &&
+  React.useEffect(() => {
+    if (isIntersecting) {
+      const { height, top } = scrollProgressEntry.target.getBoundingClientRect();
+      const progress = Math.min(1, Math.max(0, (window.innerHeight * offset - top) / height));
+
+      onStepProgress &&
       onStepProgress({
         progress,
         scrollamaId,
         data,
-        element: entry.target,
-        entry,
+        element: scrollProgressEntry.target,
+        entry: scrollProgressEntry,
       });
-  };
+    }
+  }, [scrollProgressEntry]);
 
   React.useEffect(() => {
-    const scrollTop = document.documentElement.scrollTop;
-    const direction = lastScrollTop < scrollTop ? 'down' : 'up';
     if (entry && !entry.isIntersecting && isIntersecting) {
       onStepExit({ element: entry.target, scrollamaId, data, entry, direction });
       setIsIntersecting(false);
@@ -50,17 +72,11 @@ const Step = props => {
       onStepEnter({ element: entry.target, scrollamaId, data, entry, direction});
       handleSetLastScrollTop(scrollTop)
     }
-    if (entry && entry.isIntersecting && onStepProgress) {
-      document.addEventListener('scroll', handleScroll);
-      return () => {
-        document.removeEventListener('scroll', handleScroll);
-      };
-    }
   }, [entry]);
 
   return React.cloneElement(React.Children.only(children), {
     'data-react-scrollama-id': scrollamaId,
-    ref,
+    ref: setNode,
     entry,
   });
 };

src/useIntersectionObserver.js

@@ -5,9 +5,8 @@ import { useEffect, useRef, useState } from 'react';
  * https://medium.com/the-non-traditional-developer/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5
  */
 
-export default ({ root = null, rootMargin, threshold = 0 }) => {
+export default ({ root = null, rootMargin, threshold = 0, nodeRef }) => {
   const [entry, updateEntry] = useState({});
-  const [node, setNode] = useState(null);
   const observer = useRef(null);
   useEffect(
     () => {
@@ -23,11 +22,11 @@ export default ({ root = null, rootMargin, threshold = 0 }) => {
 
       const { current: currentObserver } = observer;
 
-      if (node) currentObserver.observe(node);
+      if (nodeRef) currentObserver.observe(nodeRef);
 
       return () => currentObserver.disconnect();
     },
-    [node, root, rootMargin, threshold]
+    [nodeRef, root, rootMargin, threshold]
   );
-  return [setNode, entry];
+  return [entry];
 };