Issue trying to us horizontal axis on NextJS

[asjustis]

Bug

HI guys. I am trying to make horizontal parallax effect on my NextJS, and I wonder if I am doing something wrong here, or is there something with the lib.

So this sandbox works as I expect it: https://codesandbox.io/s/hopeful-hill-hocwy3?file=/src/App.js

However, trying the same thing on my NextJS project, it simply adds initial offset and does not animate. Below is the code I use. Any insights?

_app.js

import "src/styles/globals.css";
import { ParallaxProvider } from "react-scroll-parallax";

export default function App({ Component, pageProps }) {
    return (
        <ParallaxProvider scrollAxis="horizontal">
            <Component {...pageProps} />
        </ParallaxProvider>
    );
}

parallax.js

import Link from "next/link";
import { Parallax } from "react-scroll-parallax";
import Head from "next/head";

const Test = () => (
    <div
        //className="App"
        style={{
            display: "flex",
            flexDirection: "row",
            width: 4000,
            height: "100vh",
            overflow: "auto",
        }}
    >
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Parallax speed={-10} translateX={["-100px", "100px"]}>
            <h1>Hello CodeSandbox</h1>
        </Parallax>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
    </div>
);

export default Test;

[asjustis]

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.

[jscottsmith]

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

[asjustis]

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