Search code examples
htmlcssnext.jsreact-springreact-three-fiber

Double Scroll with react-spring parallax & react-three-fiber `Canvas`

I am trying to create a scrolling box with parallax but for some reasons it won't bound with Canvas element, even if I will include both under the same <div>.

In this screenshot, you can see div1 and div2 where each has its own scroll feature... screenshoot double scroll bar

Tried in a separate divs sep div

And even under the same div, still can't get rid of the double scroll. Any ideas? under same div default funct

Or react-spring parallax isn't compatible with react-three-fiber and that's why there is a library react-three-flex?

Here is the codesandBox

Solution

  • You could move the canvas into the Parallax container as a new ParallaxLayer like so – https://codesandbox.io/s/sad-dewdney-r0c0u?file=/components/Parallax.js