Solution: Computer not allowing scroll-down on mobile
xlgabriel opened this issue · comments
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.
i done this steps but still my problem is not solved
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
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;
Anyway thanks for your help