Is the scrolling functionality acting strange while using React Three Fiber?

In my React Three Fiber application, I have the following structure:

Website Canvas NativeHTMLContent Canvas Website

The issue I'm facing is that after scrolling down the entire canvas, the scrollbar resets to the top and starts scrolling from the top again. However, when I'm between the components, I can scroll the canvas up without affecting the entire page. It's a bit tricky to explain, but you can experience it yourself by visiting this link:

Below 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'm looking to correct the scroll behavior to simulate scrolling like an entire page. Could someone assist me in resolving this issue?

javascripttypescriptthree.jsreact-three-fiberreact-three-drei

Answer №1

When using 

<Scroll />,<ScrollControl />
in Drei, it is normal for them to work by establishing a separate scroll. In cases where two scrolls overlap on a page, only the scroll closest to the cursor will function when it reaches a certain point.

The solution is straightforward: convert the explanatory content into a react component and place it within the <Scroll /> element. This approach works seamlessly, as demonstrated in a Drei example; it can also handle content-heavy elements.

https://i.sstatic.net/ZpFsg.png screenshot showing the Drei <Html /> component example. It showcases a full-page content layout and supports all HTML interactions.

<ScrollControl>
  <Scroll>...</Scroll>
  <Scroll><YourPage /></Scroll>
</ScrollControl>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

javascriptjqueryhtmlcss

Exploring the functionality of the WHERE function in Firebase with Angular

Current Objective: Our main focus here is to allow users to post within their designated Organization Group. These posts should remain exclusively visible within the specific Organization Group they are posted in. To achieve this, I have attempted to impl ...

angulartypescriptfirebaseionic-frameworkgoogle-cloud-firestore

Protector of the young travelers' paths

I have encountered a recurring issue with implementing Guards on my pages. Despite referencing multiple solutions from StackOverflow, none of them seem to work for me. Take this example for instance. This is my first attempt at restricting access to cert ...

angulartypescriptguard

Tips for transferring information to an input field's value

There's an input box with an empty value that needs to be filled with data. <input type="text" value="" class="box"> $('.skills-tags').on('click', function(){ var value = $(".skills-tags").val(); $('.label-pr ...

javascriptjqueryhtml

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

After fetching data from an API, I stored an array in a state. Upon trying to update a specific field within an object inside the array using user input, I encountered the error message: 'Uncaught TypeError: Cannot assign to read only property 'a ...

javascriptreactjstypescript

Error: Accessing Undefined Property in Node-SQLite

I recently started developing a REST API for garden-related data collected by an Arduino using node-sqlite3. Basic queries like retrieving all the database information are working fine. However, I am facing challenges when trying to retrieve data based on ...

javascriptnode.jssqlite

The Vue v-on:click event listener seems to be unresponsive when applied to a

I've been attempting to utilize the on-click directive within a component, but for some reason, it doesn't seem to be functioning. Whenever I click on the component, nothing happens, even though I should see 'test clicked' in the consol ...

javascriptvue-componentvuejs2vue.js

The function is attempting to access the 'lockDatabase' property of an undefined object, resulting in an error

I'm encountering an error due to the scope issue with 'this', and I'm struggling to find a solution. I attempted using the fat arrow, which solved the scope problem but created another issue where I lack a callback value that needs to b ...

javascriptangulartypescript

Issue: Execution terminated with error code 1: ts-node --compiler-params {"module":"CommonJS"} prisma/seed.ts

Whenever I run npx prisma db seed, I encounter the following error: Error message: 'MODULE_NOT_FOUND', requireStack: [ '/run/media/.../myapp/prisma/imaginaryUncacheableRequireResolveScript' ] } An error occurred during the execution ...

typescriptnext.jsprisma

Modifying the appearance of a CSS element with jQuery: Step-by-step guide

The code I have is as follows: $('.signup-form-wrapper').css("style", "display: block"); $('.login-form-wrapper').css("style", "display: none"); I'm not sure why it's not working. The current appearance of ...

javascriptjquerycss

Why am I getting the error in react-dom.development.js related to my index.js file?

Upon checking the console, the following message is displayed: react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Please use createRoot instead. Until you transition to the new API, your application will behave as if i ...

javascriptreactjsreact-domreact-devtools

Optimal method for relocating an element efficiently

I'm currently working on a project where I need to implement horizontal movement for a DOM element. The movement should start on mousedown, continue on mousemove, and end on mouseup. This task is especially challenging due to the site's numerous ...

javascriptperformancecsstransform

Storing data on the server for your Cocos2d JavaScript game

I've been struggling with implementing a savegame option for my cocos2d JavaScript game. After following a tutorial from Ray Wenderlich (thanks, Ray!), I gave up on trying to do it client-side and am now looking into saving XML files to a web server w ...

phpjavascriptajaxcocos2d-iphonesave

Learn the process of encoding a string in JavaScript or jQuery and then decoding it with PHP

I am facing an issue with updating a field in the database using Ajax and PHP. Everything runs smoothly except when there are special characters present, like this: اللهم اني اشكو اليك ضعف قوتي وقلة حيلتي وهواني عل ...

phpjavascriptajaxurlencodeurldecode

I am seeking guidance for developing my own messaging platform, similar to Discord, using Typescript

Allow me to simplify this for you. This piece of code outlines TypeScript interfaces and namespaces for a WebSocket API that is commonly used in a chat or messaging system. It seems to define the format of messages being exchanged between a client and ser ...

typescriptmacos

Updating the Bootstrap entry dynamically within the @NgModule module

My web application has a specific requirement where it can only be accessed through example.com/index.html without any parameters. The backstory behind this restriction is quite lengthy, so let's not delve into that. Within the index.html file, I have ...

javascriptangular

Raphael and jQuery/JavaScript for user-selected array intersections

Hello everyone! This is my first time posting here, and I must say that I'm still quite new to JavaScript/jQuery/Raphael. Please forgive me if I make any mistakes or ask basic questions. :) I've been searching high and low for answers to my quer ...

javascriptjqueryarraysraphael

Is there a way to hide an image once my scrollable div has reached a specific height?

I'm currently working on a project that involves a scrollable div with arrows above and below. My goal is to have the arrow above only appear after the div has reached a certain height. Below is the code I've been using... $("#scrolldivup").hid ...

javascriptjqueryhtmlscroll

Errors can arise in Discord.js when encountering "undefined" before the first array object in an embed

I am currently in the process of creating a Discord bot command that allows users to construct their own city. I am encountering an issue with a list command that is supposed to display all the roads and places built within the city. However, each list kee ...

javascriptnode.jsarraysjsondiscord.js

Make the textarea larger and bring it to the forefront when it is selected

I would like to make a textarea expand (increase its height) when it is in focus. The expanded textarea should not push the content down, but rather be displayed above other content. Currently, this is the code I am using (check out the example here): $( ...

javascriptjquerytextareaz-index