Any chance of returning the scroll percentage before the ref enters the viewport?
Andkoo opened this issue · 15 comments
It would be really useful for my use case if the percentage could be returned before the ref element enters the viewport, because I am setting the app theme based on scroll position of a certain element. It works perfectly fine when the element is in the viewport, however when it sits above or below the viewport upon mounting, then the percentage isn't returned and therefore I can't set the theme without implementing some manual solution.
Doesn't it return 0 as the percentage before it enters the viewport?
Do you have an example? Using hooks?
It doesn't return 0 before entering the viewport, which I think is the intended behavior. However it would be nice if it actually did return the value at least once upon page load (0 when the element is below the viewport, 1 when it's above the viewport). Also, yes, using hooks.
The hook will always return a value, and the value will default to 0. What value are you seeing?
See the storybook - it starts outside view: https://thebuilder.github.io/react-scroll-percentage/?path=/story/usescrollpercentage--example-vertical
I've created a demo which should help understand my issue better. When the element starts crossing the viewport, it should start changing the background of the app (the darker areas are there to illustrate the area, which should influence the background while scrolling through it). It's hard to fully illustrate the issue since when the demo is reloaded, the scroll position is always at the top. However the scroll position is remembered upon reloading in my project and yes, the hook does always return 0 as a default value, but when the watched element is above the viewport upon loading, then it would be helpful if it would return 1.
EDIT: I said that the 0 isn't returned in the previous comment, which was wrong. It is returned but I was logging it out in useEffect with the scrollPos being watched for changes, which was a logical mistake.
Right - I get what you're asking for. That would make sense, and is an easy fix.
Awesome, thanks! 👏
A new feaure request in my project revealed that the initial value is always 0 even when the element is in the viewport. Am I doing something wrong?
EDIT: it's either 0 or 1 but never something like 0.5 when the element is halfway through the viewport.
Does it update correctly when you start scrolling? Does the element have the correct size?
It executes the same function to determine the position on init as when it scrolls, so the result should be the same.
Yes, it updates correctly upon scrolling, it's only the initial value which is incorrect. I might be doing something wrong, but I'm not sure what's the culprit.
EDIT: What do you mean by "correct size"? The element is actually the whole page and I'm using the scroll percentage to translateY one element in a parallax fashion. https://blockunison.com/career - see for yourself. It's the B logo in the "Stop scrolling! Start doing." section. Scroll to the section, reload the page and the B will be at its initial position, then upon scrolling it jumps to the correct position.
Hmm. Will have to investigate why it doesn't trigger that correctly.
I can replicate on this page when viewed on Edge: https://thebuilder.github.io/react-scroll-percentage/iframe.html?id=usescrollpercentage--example-vertical
But that page seems to be working in Chrome, unlike your example.
I don't know if this will help, but I can replicate the bug even in Chrome.
Environment: MacBook Air 2017, macOS Mojave 10.14.3, Google Chrome 79
I have a similar issue, I need to start scrolling before a value other than 0 is returned rather than getting the value on page mount.
Sorry - I haven't had time to look into this specific issue yet.😧
I've been having this issue too, but only with the useScrollPercentage hook. Using the render props of the <ScrollPercentage> component has the correct percentage on mount. 🤔
Hey @thebuilder is this fixed now?