Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Fedik opened this issue Jun 21, 2022 · 1 comment

Comments

@Fedik
Copy link

Fedik commented Jun 21, 2022

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.

@lorismat
Copy link

lorismat commented Feb 9, 2023

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants