Phaser3项目桌面双滚动条、移动端无滚动条问题求助

问题根源 #

桌面端出现内外双层滚动条，是因为：

• html/body默认存在margin/padding，导致页面整体高度超出视口，触发浏览器原生滚动条。
• .Content容器设置了height:100vh和overflow-y:scroll，同时Phaser游戏canvas固定高度2500px，超出容器高度，触发容器内部滚动条。
  移动端无滚动条是因为多数移动浏览器默认隐藏滚动条，并非滚动功能失效。

修复步骤 #

1. 重置全局样式，禁用原生滚动条 #

修改CSS，消除html/body的默认边距并禁用全局滚动：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.Content {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  /* 可选：隐藏桌面端滚动条视觉样式（保留滚动功能） */
  scrollbar-width: none; /* 适配Firefox */
}

.Content::-webkit-scrollbar {
  display: none; /* 适配Chrome/Safari/Edge */
}

2. 调整Phaser缩放配置，固定画布尺寸 #

修改Phaser配置，使用NONE缩放模式确保画布按设定尺寸渲染，避免自动缩放导致的异常：

const config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.NONE, // 禁用自动缩放，使用自定义宽高
        parent: 'game-container',
        width: '100%',
        height: 2500,
        disableContextMenu: true
    },
    scene: [game]
};

3. 排查容器内部元素 #

确认game-container内的脚本或其他元素无额外margin/padding，避免意外撑开容器高度（脚本标签默认不会影响，可忽略）。

效果验证 #

修改后，桌面端仅保留.Content容器的滚动功能（可选择隐藏滚动条样式），全局滚动条被彻底禁用；移动端可正常滚动，滚动条会按需显示。

内容的提问来源于stack exchange，提问作者Someone else