Disable Scrolling While Focused on #Game about arcade HOT 3 CLOSED

This issue is being addressed in disable_scroll

from arcade.

So Game.setAttribute("position", "fixed") definitely fixes the scrolling issue. However, setting the position to fixed moves the canvas slightly to the left in the demo game, and also prevents you from scrolling to read the instructions.

When I looked at this on Sunday, I tried to do something a bit more complicated so that you could still scroll on the page before starting the game (i.e. creating a button over the canvas that fixes the position when clicked). Changing the position on click still causes the demo game to move slightly, which isn't ideal.

Of course, these issues might be unique to how game-demo.html is formatted. I'm curious if anybody has any input. Would you guys prefer to have the page load with position fixed, or to do it on click, which could possibly rearrange some CSS stuff?

from arcade.

Oh shoot! I didn't think about that. This is what I think could work:

setting the position to fixed moves the canvas slightly to the left in the demo game,

You can fix this with:
Canvas.style.position = "fixed";
Canvas.style.top = "50%"; Canvas.style.left = "50%";
Canvas.style.transform = "translate(-50%,-50%)";

This will center position absolute/fixed items.

and also prevents you from scrolling to read the instructions.

That's probably fine. I say we should just hide everything on the screen that's not the game window. I think the best way is to add a huge box shadow:
Canvas.style.boxShadow = "0 0 0 100vmax black";

from arcade.