-1

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

enkicoma
  • 461
  • 4
  • 25
  • 1
    I recommend putting a code pen so people can look at the code. – Josh Dec 13 '20 at 21:04
  • @Josh tried to create a codebox but got an error... [CODEBOX](https://codesandbox.io/s/clever-worker-hd1bf?file=/components/Duck.js) – enkicoma Dec 16 '20 at 22:48
  • 1
    You haven't added react-dom as a dependency, which is clearly written in the terminal – Josh Dec 17 '20 at 15:26
  • @Josh I thought that next.js has it bounded like a dependency... Thanks a lot, will try to make till the state where you can see the `sccrooling` effect - issue, will keep you updated – enkicoma Dec 17 '20 at 18:07
  • @Josh here you can see the scrolling effect (ISSUE) https://codesandbox.io/s/funny-moore-4epe4?file=/pages/index.js – enkicoma Dec 19 '20 at 18:51

1 Answers1

1

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

Josh
  • 603
  • 5
  • 15
  • your code sandbox resolves the main scroll issue, but as we discussed parallax isn't designed to be used as I tended (too laggy) when combined. Thx – enkicoma Dec 20 '20 at 17:44