formatting useref in style for paralax effect-CodePudding

I'm using fixed positioning to try and create a simple parallax effect

export const Home = () => {
    const paralaxref = React.useRef();


    const backdropImgStyle = {
        height: '200vh',
        position: 'fixed',
        top: paralaxref.current?.clientHeight? window.pageYOffset / paralaxref.current.clientHeight*-500 : 0,
        left: 0,
        zIndex: -100,
        filter: 'grayscale(.7)',
    }

however, it doesn't update as I scroll how would I do that?

CodePudding user response：

use window.onScroll and then update your component styles inside it. This will work but use it inside useEffect and you can remove the listener when component will unmount.

useEffect(() => {
window.onscroll = () => {
// add logic
}
}, []);