scrollama icon indicating copy to clipboard operation
scrollama copied to clipboard

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

Open Fedik opened this issue 2 years ago • 1 comments

Script does not trigger onStepEnter (and Exit) when the element is fully visiable on initial load. Example https://russellgoldenberg.github.io/scrollama/progress/

Open the page, scroll down, progress of both elements changes to 100% That good.

Now scroll all way down, and refresh the page (push F5). Browser remember last scroll position, so the page stays "fully scrolled down". Now both elements have 0% progress, but should be 100%

Checked in Chrome, Firefox.

Fedik avatar Jun 21 '22 10:06 Fedik

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)

lorismat avatar Feb 09 '23 14:02 lorismat