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.

[J Scott Smith]

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