React-fiber（drei）中ScrollControls与<Html>元素结合导致文本滚动出视野的问题

Hey there, I ran into this exact regression in Drei v9 too—super frustrating when text you’ve anchored to a 3D object starts drifting away with scroll!

What’s the Issue? #

When using the <Html> component (to bind text to 3D elements) alongside <ScrollControls> in Drei v9, the anchored text unexpectedly scrolls out of the viewport. This functionality worked perfectly as intended in Drei v8, so this is definitely a version-specific regression.

Debugging Steps to Isolate the Problem: #

• Version Pin Verification: Roll back to Drei v8 first to confirm your code works as expected there—this helps rule out issues in your own implementation.
• Check Changelog for Prop Changes: Look through Drei’s v9 release notes to see if there were updates to how <Html> handles positioning or how <ScrollControls> propagates scroll transforms. It’s likely a change in prop defaults or event handling between these two components.
• Inspect DOM Styling: Pop open browser dev tools and monitor the <Html> element’s position/styling as you scroll. You might notice it inheriting a transform from the scroll container that wasn’t present in v8.
• Manual Position Lock Test: As a quick sanity check, try explicitly setting the <Html> component’s position or adding a CSS position: fixed (adjusted to match the 3D element’s screen position) to see if it stops scrolling with the <ScrollControls> container.

Temporary Workaround to Unblock Your Project: #

If you need to move forward immediately, pin your Drei dependency to v8 using your package manager:

# For npm
npm install @react-three/drei@8

# For yarn
yarn add @react-three/drei@8

I’d also recommend filing an issue on the Drei GitHub repo with a minimal reproduction case—this will help maintainers fix the regression faster.

内容的提问来源于stack exchange，提问作者Luhn