0

I have the following structure in my React Three Fiber application:

Website Canvas NativeHTMLContent Canvas Website

The problem I'm encountering is that after scrolling down the entire canvas, the scrollbar resets to the top and scrolls from top to bottom again. However, when I'm in between the components, I can scroll the canvas up without scrolling the entire page up. It's a bit difficult to explain, but you can try experiencing it yourself by visiting the following link: https://what-a-bottle-website.vercel.app/

Here is the code for the Canvas component:

https://github.com/lucas-goldner/WhatABottle-Website/blob/main/components/_sections/hero.tsx

And here is the _index.ts file:

https://github.com/lucas-goldner/WhatABottle-Website/blob/main/pages/index.tsx

The content inside nonHeroContainer is non-HTML content. I want to fix the scroll behavior so it scrolls like an entire page. Would anyone be able to help me with this issue?

Lucas Goldner
  • 617
  • 9
  • 29
  • [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/q/254428/1427878). Please don't paste links to your Github, instead, add a [mre]. You can create a React snippet as explained [in this meta post](https://meta.stackoverflow.com/questions/338537/how-do-i-create-a-react-stack-snippet-with-jsx-support). – 0stone0 May 17 '23 at 16:24
  • 1
    @0stone0, it doesn't make sense to make a minimal reproducible example since this is an issue that is caused by the collection of the components. – Lucas Goldner May 17 '23 at 21:12

1 Answers1

1

It is expected behavior as <Scroll />,<ScrollControl /> in Drei is supposed to work by setting up a separate scroll. The page has an area where two scrolls overlap, thus only one scroll closest to cursor works if reached to certain spot.

The solution is simple: make the descriptive content as a react component and put it inside the <Scroll /> element. There's no problem with that, as illustrated in a Drei Html example; it can also handle a content heavy elements.

enter image description here screenshot of Drei <Html /> component example. It holds a full page content, also accepts all html interactions.

<ScrollControl>
  <Scroll>...</Scroll>
  <Scroll><YourPage /></Scroll>
</ScrollControl>
sungryeol
  • 3,677
  • 7
  • 20