You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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)
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.
The text was updated successfully, but these errors were encountered: