refactor: replace calculation by intersectionRatio option

Author: condorheroblog

src/step.tsx

@@ -67,11 +67,10 @@ export const Step: React.FC<StepProps> = ({
 
   useEffect(() => {
     if (isIntersecting && scrollProgressEntry) {
-      const { height, top } = scrollProgressEntry.boundingClientRect;
-      const progress = Math.min(1, Math.max(0, (window.innerHeight * offset - top) / height));
+      const progress = scrollProgressEntry.intersectionRatio;
       if (onStepProgress) {
         onStepProgress({
-          progress,
+          progress: direction === 'up' ? 1 - progress : progress,
           data,
           element: scrollProgressEntry.target,
           entry: scrollProgressEntry,

src/utils.ts

@@ -74,7 +74,7 @@ interface GetProgressRootMarginParams {
  */
 export const getProgressRootMargin = ({ direction, offset, nodeOffsetHeight, innerHeight }: GetProgressRootMarginParams) => {
   if (!nodeOffsetHeight) return '0px';
-  const offsetHeight = (nodeOffsetHeight / innerHeight);
-  if (direction === 'down') return `${(offsetHeight - offset) * 100}% 0px ${(offset * 100) - 100}% 0px`;
-  return `-${offset * 100}% 0px ${(offsetHeight * 100) - (100 - (offset * 100))}% 0px`;
+  const offsetHeightRatio = (nodeOffsetHeight / innerHeight);
+  if (direction === 'down') return `${(offsetHeightRatio - offset) * 100}% 0px ${(offset * 100) - 100}% 0px`;
+  return `-${offset * 100}% 0px ${(offsetHeightRatio * 100) - (100 - (offset * 100))}% 0px`;
 }