Solution: Computer not allowing scroll-down on mobile

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

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.