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]);

...