Issue trying to us horizontal axis on NextJS about react-scroll-parallax HOT 3 CLOSED

Update: I was able to make it work by moving ParallaxProvider to the Test script and setting the scrollContainer parameter manually. Not sure if that's a natural behaviour in this case though.

from react-scroll-parallax.

Sounds like the scroll container wasn't the expected default (document body) when it was used in _app.

from react-scroll-parallax.

Got it, thanks. Seems for NextJS the easiest way to make it work is to set scrollContainer manually for <ParallaxProvider scrollContainer={...}> and if needed to pass the same element to children as in:

Parent component:

const [parallaxScrollEl, setParallaxEl] = useState(null);
const scrollRef = useRef(null);

useEffect(() => {
    setParallaxEl(scrollRef.current);
}, [scrollRef]);

<ParallaxProvider
    scrollAxis="horizontal"
    scrollContainer={parallaxScrollEl}
>
    <div ref={scrollRef}>
        <CustomComponent parallaxEl={parallaxScrollEl} ... />
    </div>
>

CustomComponent:

const CustomComponent =  (props) => {
	const { parallaxEl } = props;

        return <ParallaxProvider scrollAxis="horizontal" scrollContainer={parallaxEl}>
            <Parallax ...>{/* use parallax here in child component*/}</Parallax>
        </ParallaxProvider>
}

Maybe this helps someone

from react-scroll-parallax.