How to get the current offset value? - Parallax

[Jaay7]

I tried this to display the offset number of the layer but it remains 0 even if I scroll to the about or shop.

import React from 'react'; import { Parallax, IParallax, ParallaxLayer } from '@react-spring/parallax' const Home:React.FC = () => { const parallax = React.useRef<IParallax>(null!) return ( <div style={{position: 'absolute', top: "50%", left: "50%"}}> {parallax.current.offset} </div> <Parallax ref={parallax} pages={5} style={{top: '0', left: '0'}}> <ParallaxLayer offset={0} speed={0} factor={5} /> <ParallaxLayer offset={0} speed={1}><div>home</div></ParallaxLayer> <ParallaxLayer offset={1} speed={1}><div>about</div></ParallaxLayer> <ParallaxLayer offset={2} speed={1}><div>shop</div></ParallaxLayer> </Parallax> ) } 

[kindoflew]

Hi! I just looked into it and (although it is not documented) this is sort of a bug! Right now, we are only updating offset when the scrollTo method is called to ensure that we are scrolling from the correct offset.

So, thanks for finding this!

Edit, edit: So, I didn't notice at first that you are attempting to render parallax.current.offset directly in your return. This won't work because the internal state of Parallax is a mutable ref object using a fancy version of useMemo. Because of this, it will never cause a rerender when updated. To get the current value of offset you'd have to have a function that is called when you want to display it. I made an example for another question that puts it in a click handler:

... const parallax = useRef(); const handleClick = () => { if (parallax.current) { console.log(parallax.current.offset) } } return ( <Parallax ref={parallax}> <ParallaxLayer onClick={handleClick}> ...

This will give you the offset after clicking a ParallaxLayer. But, as it stands now, having a constantly updating offset displayed is not possible. But feel free to open an Issue for a feature request!

[Jaay7]

Thank you!

[slaymantis]

Any update on this feature. It would be very useful to trigger things on the onChange using the offset. The click doesn't seem to change from the 9 either

[kindoflew]

@slaymantis does the answer in this discussion help at all?: #1877 (comment)

[chaseliu1313]

is there anyother way to know which component is currently in the center of the viewport? Offset is the only accurate way I found that works across different sizes of screens.

[1NAvEEN1]

From this way I was able get the current page offset when scrolling.
...
const totalPages = 6;
const parallaxRef = useRef(null);
const [currentPage, setCurrentPage] = useState(0);

const handleScroll = useCallback(() => {
if (parallaxRef.current) {
const container = parallaxRef.current.container.current;
const scrollYProgress =
container.scrollTop /
(container.scrollHeight - container.clientHeight);
const pageOffset = scrollYProgress * totalPages;
setCurrentPage(Math.floor(pageOffset));
}
}, [totalPages]);

useEffect(() => {
if (parallaxRef.current) {
const container = parallaxRef.current.container.current;
container.addEventListener("scroll", handleScroll);
return () => {
container.removeEventListener("scroll", handleScroll);
};
}
}, [handleScroll]);

...