Scrollama does not trigger onStepEnter when the element is fully visiable on initial load #141

Activity

1. lorismat commented on Feb 9, 2023

   

   lorismat

   on Feb 9, 2023

   More actions

   Hi! I'm quite new to the library, but here are two suggestions (1. changing the source code / 2. workaround)

   (1)
   In the entry.js file,

   • The notifyProgress is only trigger on step.state === "enter" meaning that the elements won't be watch until they are scrolled. Removing the condition will watch them. Not sure here about the consequences though.
   • With the condition above removed, the intersectProgress can be complemented:

   function intersectProgress([entry]) {
       const index = getIndex(entry.target);
       const step = steps[index];
       /* extension */
       // getting the boundingClientRect of our target element
       const { isIntersecting, intersectionRatio, target, boundingClientRect } = entry;
       // compute the relative offset
       const h = window.innerHeight;
       const off = step.offset || globalOffset;
       const factor = off.format === "pixels" ? 1 : h;
       const offset = off.value * factor;
       // check if the initial position of the scroll is over the watched step
       if ( offset > boundingClientRect.bottom) { 
         notifyProgress(target, 1); // if yes, progress set to 100%
       }
       /* end of extension */
       if (isIntersecting && step.state === "enter")
   	    notifyProgress(target, intersectionRatio);
   }
   

   Again, not sure about the consequences, and there might be a better way.

   (2)
   Otherwise, you can also set a scroller on a bigger container and interpolate the scroll progress for each element you want to show the progress for (eg: progress for step 1 will go from 10% to 20% of the container, for step 2 from 30% to 40% and so on)