[bug]: Why can't i use the hook useScroll with Parallax?

[rylwl]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

@react-spring/web 9.7.4

What's Wrong?

I try to use the hook useScroll with the Parallax,but it doesn't work.

import { useScroll,animated } from '@react-spring/web';
import { IParallax, Parallax,ParallaxLayer } from "@react-spring/parallax";
import { useRef } from 'react';

export default function HomePage() {
  const paraRef = useRef<IParallax>(null!);
  const { scrollYProgress } = useScroll({
    container: paraRef.current?.container
  })
 
  return (
    // <>111</>
    <Parallax ref={paraRef} pages={3} style={{ top: '0', left: '0' }}>
      <ParallaxLayer offset={0} speed={2.5} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <animated.p style={{ backgroundColor: scrollYProgress.to(x => {return `rgba(255,0,0,${x})`})}}>Parallax</animated.p>
      </ParallaxLayer>
      <ParallaxLayer offset={1} speed={2.5} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <animated.p style={{ backgroundColor: scrollYProgress.to(x => {return `rgba(255,0,0,${x})`})}}>Parallax</animated.p>
      </ParallaxLayer>
      <ParallaxLayer offset={2} speed={2.5} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <animated.p style={{ backgroundColor: scrollYProgress.to(x => {return `rgba(255,0,0,${x})`})}} > Parallax</animated.p>
    </ParallaxLayer>
    </Parallax >
  );
}

To Reproduce

as the code I paste

Expected Behaviour

useScroll can listen to the Parallax and the background color will change

Link to repo

just this code

[rylwl]

can someone provide a example that you can use the ref for a element such as div and useScroll to observe the div?

[rylwl]

It looks like the ref can't get when the useScroll is running. The key issue is forwardRef in Parallax Component.

[rylwl]

I find the every hook that you should pass it's ref can't be used with the Parallax Component?

[hadikman]

I have the same problem. It doesn't return scrollYProgress value.