Html doesn't work properly with ScollControls?

Questions
, , , , ,
1

I’ve just created a sandbox to show my problem. It’s a simplified version of another project, but the problem occurs here as well.

There are two sections. The idea is to scroll down, and at the beginning of the second section start to rotate Camera. Each ‘item’ of the second section has an Html from Drei with some text.

But it seems like the transformation applies incorrectly - scroll slowly between the very first and second mesh to see some strangely placed text. Moreover, it disappears completly when the scroll goes up.

Is there something I missed when using ScrollControls with Html this way?

2

Okay. I came with two solutions. I just keep them here if someone faces a similar issue later.

The first is to modify wrapperClass to move down the div container (aka wrapper) of Html. It works more or less, but behaves strangely when quick scrolling, and requires some tricks to be done with css if Htmls count is greater than one. Beside that, some additional calculations may need to get a target position. Sounds and looks weird.

The second one (preferable) I’ve found in Issues of pmndrs/drei. The solution is to use parentNode of domElement in portal prop. Works as expected.