drei icon indicating copy to clipboard operation
drei copied to clipboard

Published 20 hours ago • verified publisher icon pmndrs

ScrollControls scroll Html element even outside of <Scroll> in Typescript

Open dpnick opened this issue 2 years ago • 2 comments

Hi everyone!

First of all, thanks for this amazing library, I have some much fun working with it.

  • three version:
  • @react-three/fiber: ^8.6.0
  • @react-three/drei: ^9.23.4
  • node version: v18.9.0
  • npm version: 8.19.1

Problem description:

I recently found a new (I guess) issue with the ScrollControls. As explained in the title, if I put a Html element inside the ScrollControls, this Html element will move according to the scroll position (which is not expected because it is not inside a Scroll element).

For some reasons, I was able to reproduce this bug only in Typescript (it works as expected in pure JS).

Relevant code:

Here is a minimal code to repro:

import { Html, ScrollControls } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import React from 'react';
import './App.css';

function App() {
  return (
      <Canvas style={{ position: 'fixed', top: 0, left: 0 }}>
        <ScrollControls pages={6}>
          <Html style={{ background: 'green' }}>
            <p style={{ color: 'red' }}>This is a test</p>
          </Html>
        </ScrollControls>
      </Canvas>
  );
}

export default App;

Suggested solution:

I'm not sure if it is the best solution, but I at least found a temporary one:

  • add a wrapperClass to your Html element with position: fixed !important

I also found a potential interesting hint, it seems that for the same code (example above) the component tree is not the same for Typescript and pure JS.

dpnick avatar Sep 09 '22 10:09 dpnick

Can you share a codesandbox?

joshuaellis avatar Sep 09 '22 11:09 joshuaellis

I have noticed it also: https://stackoverflow.com/questions/73661855/react-fiber-drei-scrollcontrols-preventhtml-from-scrolling

The example @joshuaellis : https://codesandbox.io/s/bug-drei-scrollcontrols-txccfw

yondr-agency-15 avatar Sep 09 '22 12:09 yondr-agency-15

Hi I'm also facing this issue, It used to work just fine in version ^8.10.7 before I updated.

I was able to temporarily fix this by patching the Html file back to its state from 8.10.7.

TomasGonzalez avatar Sep 30 '22 20:09 TomasGonzalez

Hello. I have this issue as well. Will it be fixed soon? Thanks

michelecocuccio avatar Oct 31 '22 16:10 michelecocuccio

Hello. I have this issue as well. Will it be fixed soon? Thanks

I just submitted a PR to fix it c967c5b, you can go check it out, it was just one line. Can use NPM patch until it is released and continue working.

Edit: Now that I think about it, you could probably fix it also by sending gl.domElement.parentNode as the portal prop.

TomasGonzalez avatar Nov 01 '22 00:11 TomasGonzalez