Solution: Computer not allowing scroll-down on mobile

[xlgabriel]

If you've opened your portfolio on mobile, you've probably noticed that sometimes the computer does not allow you to go down easily. Maybe you don't have this problem, but I did. Now, take a look at my approach to solve this:

Be aware that the Canvas basically takes all the space from the Hero section, so, you'll have to add a certain property called touch-action: pan-y to allow the users go up or down even when they have their fingers on the computer.

Solution:

At index.css, add this code:

.canvas {
  touch-action: pan-y !important;
}

Now, at Computers.jsx, add this value to your <Canvas>

className="canvas"

It might look similar to this:

    return (
        <Canvas
            frameloop="demand"
            shadows
            dpr={[1, 2]}
            camera={{ position: [20, 3, 5], fov: 25 }}
            gl={{ preserveDrawingBuffer: true }}
            className="canvas"
        >
            <Suspense fallback={<CanvasLoader isMobile={isMobile} />}>
                <OrbitControls enableZoom={false} maxPolarAngle={Math.PI / 2} minPolarAngle={Math.PI / 2} />
                <Computers isMobile={isMobile} yValue={yValue} />
            </Suspense>

            <Preload all />
        </Canvas>
    );

I hope you find this approach useful and clean. The user is still able to rotate the computer easily.