Open klader-digital opened 1 month ago
three
@react-three/fiber
@react-three/drei
node
npm
yarn
When making use of the infinite scroll feature of ScrollControls on iPhone (iOS), it seems to be uncontrollable when scrolling towards the top of the screen (see media).
https://codesandbox.io/embed/pmkh9n
function App() { return ( <Canvas camera={{position: [0, 0, 10], fov: 15}}> <ScrollControls infinite pages={16} > <Carousel/> </ScrollControls> </Canvas> ) } function Carousel(props) { const ref = useRef() const scroll = useScroll() useFrame((state, delta) => { ref.current.rotation.z = -scroll.offset * (Math.PI * 2) // Rotate contents }) return ( <group ref={ref} {...props}> <mesh> <planeGeometry args={[1, 1]}/> <meshBasicMaterial color={'#000000'} /> </mesh> </group> ) }
https://github.com/pmndrs/drei/assets/80181288/7d24f738-724e-4f26-a9be-0a0b0e89dd6b
three
version: ^0.164.1@react-three/fiber
version: ^8.16.7,@react-three/drei
version: ^9.106.0node
version: 22.1.0npm
(oryarn
) version: 10.7.0Problem description:
When making use of the infinite scroll feature of ScrollControls on iPhone (iOS), it seems to be uncontrollable when scrolling towards the top of the screen (see media).
Relevant code:
https://codesandbox.io/embed/pmkh9n
https://github.com/pmndrs/drei/assets/80181288/7d24f738-724e-4f26-a9be-0a0b0e89dd6b