scrollama
scrollama copied to clipboard
Scrollama does not trigger onStepEnter when the element is fully visiable on initial load
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.
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 onstep.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)