Phaser3 no scroll bar on mobile

Question

while working on a phaser3 project I seem to have 2 scroll bars on Desktop (inner and outer) but none on mobile. Can someone help?

This is my phaser config:

const config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.AUTO,
        parent: 'game-container',
        width: '100%',
        height: 2500,
        disableContextMenu: true
    },
    scene: [game]
};

`
and this is the html:

<html>
<head>
    <title>game.fun</title>
</head>
<style>
    .Content {
        height: 100vh;
        overflow-y: scroll;
        overflow-x: hidden;
        background: #fff;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
</style>
<body>
    <div id="game-container" class="Content">
        <script src='static/socket.io.js'></script>
        <script src="static/game.js"></script>
    </div>
</body>
</html>

Kind of tried anything on the web

Tried removing the html scrollbars and playing with the height.

I *think* the most smartphones only show scrollbars while scrolling. On which device don't you see scrollbars? Is the website scrollable even without scrollbars? — winner_joiner, May 04 '23 at 07:53
I am using Pixel6, even when I try to scroll they are not there — Someone else, May 05 '23 at 08:02

winner_joiner · Answer 1 · 2023-05-05T10:09:49.023

0

I'm not 100% sure if this is the cause of the error, but how your HTML is structured. The the phaser canvas is not created in the .Content div. This could since all the css is on the div it won't work otherwise.

You would have to restructure it, for the CSS to apply.
(simply placing the script tags aoutside of the div where the phaser game canvas should be placed.)

something like this:

<body>
    <div id="game-container" class="Content"></div>
    <script src='static/socket.io.js'></script>
    <script src="static/game.js"></script>
</body>

May be this might solve the issue.

edited May 05 '23 at 10:09

answered May 05 '23 at 08:35

winner_joiner

12,173
4
36
61

I fixed it, but still have the same issue. The strange thing is that it works on an emulator but not on a real PIXEL google 6. – Someone else May 07 '23 at 20:53

Phaser3 no scroll bar on mobile

1 Answers1