如何强制 HTML 页面具有水平滚动条

Question

我正在用 HTML canvas 和 javascript 制作游戏。此刻，javascript 在我脑海中生成了复杂的 canvas 元素。正文中只有一个带有说明的小 p。该游戏大约为 1100 像素 x 600 像素。如果您转到具有较小分辨率屏幕的页面，游戏的其余部分将被裁剪掉边缘。我希望页面有一个浏览器原生的水平和垂直滚动条，它们可以用来滚动游戏。

我看过容器和最小宽度的各种组合，但我想知道是否有这方面的标准做法？

Answer 1

使用overflow-y和CSS

body {
   overflow-x: scroll; /*For regular vertical scroll */
   overflow-y: scroll; /*For Horizontal scroll */
}

Answer 2

CSS溢出属性，指定是剪辑内容，渲染滚动条，还是仅在内容溢出其块级容器时显示内容。

尝试将 ID #scrollable 添加到要强制显示滚动条的元素，然后

#scrollable{
    overflow: scroll;
    width: 100%;
}

来自MDN Docs

如果你想在单轴上强制溢出滚动，你可以使用：

overflow-x: scroll;

或

overflow-y: scroll;

MDN Docs on overflow-x

如何强制 HTML 页面具有水平滚动条

How to force an HTML page to have a horizontal scrollbar

html

javascript

css

scroll

width