如何強制HTML頁面具有水平滾動條

Question

我正在用HTML canvas和javascript開發游戲。 此刻，我腦海中的javascript生成了復雜的canvas元素。 體內只有一個帶有指示的小p。 游戲約為1100 x 600像素。 如果轉到分辨率較小的頁面，則游戲的其余部分將被剪切掉。 我希望頁面具有瀏覽器本機的水平和垂直滾動條，它們可用於滾動游戲。

我已經研究了容器和最小寬度的各種組合，但是我想知道是否存在標准做法？

Answer 1

CSS溢出屬性，指定是在其塊級容器溢出時是剪輯內容， 渲染滾動條還是僅顯示內容。

嘗試將ID #scrollable添加到要強制使用滾動條的元素，然后

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

從MDN文檔

如果要在單個軸上強制溢出滾動，可以使用：

overflow-x: scroll;

要么

overflow-y: scroll;

MSDN文檔在overflow-x上

Answer 2

使用overflow-y和CSS

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