Why doesn't overflow: hidden work on body?

Question

https://code.sololearn.com/W037oNd04DG2/?ref=app

Answer 1

Do you get the scrollbars without any change to the code?

If you need to make any changes to the code to reproduce the scrolling issue, please make them.

I tried simulating iphone X and other mobile devices in Google Chrome on my laptop but was unable to see any scrollbars in the running code. Scrollbars appeared in the HTML, CSS, and JS tabs but those are not under control from your code.

From what I see, the following from your code should work well:
body{
background-image: url(https://lh3.googleusercontent.com/proxy/OY_SGIofyMh-F6Y1uSgM6hRAoKxBH2T8ucD42oLjsjJLxeM9nC0zGdy5bvYlxX3waM4L9kxIxj217e6uTi364FXxFmDOI8HnDD1nG6D4LWl-K6tt0NRl3cxE);
width: 100vw;
height: 100vh;
overflow: hidden;
}

The width, height, and overflow properties there are key.

Try adding this to see if this changes your results on your mobile device:
html, body {
padding: 0;
margin: 0;
}

I can't reproduce a problem but maybe there is some space outside of the body that leads to scrollbars on your device.

Answer 2

It does. Your overflow: hidden is set and working on the body element there. I see no scrollbars when I run it and keep running for several seconds.

This can be proven with the following steps:
1. Remove your overflow: hidden from your body's CSS.
2. Run your code. Notice the scrollbars appearing? That's because overflow: hidden isn't doing its job.
3. Add overflow: hidden back to your body's CSS. In other words, undo step 1.
4. Run again. Notice there is no scrollbars? overflow: hidden is now doing its job.

Answer 3

Josh Greig after the divs are moved if they overflow the body the scrollbars will appear

Answer 4

Karak10 wrote, "Josh Greig after the divs are moved if they overflow the body the scrollbars will appear"

Response:

Can you move the divs like you're describing so the problem is reproduceable right away?

If I replace your box JavaScript code with this, I still don't see any scrollbars in Google Chrome on my laptop and the boxes are far larger than the viewport:
setInterval(()=>{
boxes.forEach((box)=>{
box.style.top =
Math.floor(Math.random() * 90) + "vh";
box.style.left =
Math.floor(Math.random() * 50) + "vw";
box.style.width =
Math.floor(Math.random() * 1250) + "px";
box.style.height =
Math.floor(Math.random() * 1250) + "px";
});
}, 500);

});

Answer 5

I haven't tried on laptop, on my phone however I can scroll.