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

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.

[soma2205]

i done this steps but still my problem is not solved

[xlgabriel]

i done this steps but still my problem is not solved

Could you provide screenshots of the code you've added on the index.css and in Computers.jsx

[soma2205]

[xlgabriel]

That's odd. Would expect it to work just like it did work in mine. I honestly don't know how why it's not working but that approach of using is definitely what you're looking for to fix it. touch-action: pan-y !important;

[soma2205]

Anyway thanks for your help