英文:
The scroll behaviour is behaving weird with React Three Fiber?
问题
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?
英文:
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?
答案1
得分: 1
以下是翻译好的内容：
这是预期的行为，因为在 Drei 中，<Scroll /> 和 <ScrollControl /> 应该通过设置一个单独的滚动来工作。页面上有一个区域，两个滚动重叠，因此只有最接近光标的一个滚动在到达某个点时起作用。
解决方案很简单：将描述性内容制作成一个 React 组件，并将其放在 <Scroll /> 元素的内部。这没有问题，正如在 Drei 的 Html 示例 中所示；它还可以处理内容较重的元素。
Drei <Html /> 组件示例的截图。它包含了一个完整的页面内容，并接受所有的 HTML 交互。
<ScrollControl>
<Scroll>...</Scroll>
<Scroll><YourPage /></Scroll>
</ScrollControl>
英文:
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.
screenshot of Drei <Html /> component example. It holds a full page content, also accepts all html interactions.
<ScrollControl>
<Scroll>...</Scroll>
<Scroll><YourPage /></Scroll>
</ScrollControl>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论