畫布切換填充整個頁面並刪除滾動條

Question

我的頁面上有一個畫布，想要切換它以填充頁面和向后。 我的頁面通常“更高”然后是屏幕高度，因此頁面上有一個滾動條。 當我像在CSS中那樣設置畫布的大小時，此滾動條不會隱藏：

canvas {
    display: inline;
    outline: 0;
    margin: 50;
    border: 1px solid #E0E0E0;
}

canvas.fullscreen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    margin: 0;
}

我的JavaScript看起來像這樣：

//toggle the fullscreen mode
function fullscreen() {
    if (!fullWindowState) {
        fullWindowState = true;
        //canvas goes full Window
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.className = "fullscreen"
    } else {
        fullWindowState = false;
        //canvas goes normal
        canvas.width = 820;
        canvas.height = 600;
        canvas.className = "";
    }
}

完整的代碼也位於github上，頁面位於gh-pages http://patsimm.github.io/mandelight/

當畫布處於“全屏”模式時，我真的不知道如何刪除滾動條。 每一個幫助都很感謝！

謝謝！ patsimm

Answer 1

這與width <canvas>標簽有關。

如果未將<canvas>設置為display:block則會導致滾動條。

詳細信息： http : //colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen

Answer 2

當您處於fullWindowState時，嘗試將overflow設置為hidden ；

//toggle the fullscreen mode
function fullscreen() {
    if (!fullWindowState) {
        fullWindowState = true;
        //canvas goes full Window
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.className = "fullscreen"

        document.body.scrollTop = 0; // <-- pull the page back up to the top
        document.body.style.overflow = 'hidden'; // <-- relevant addition
    } else {
        fullWindowState = false;
        //canvas goes normal
        canvas.width = 820;
        canvas.height = 600;
        canvas.className = "";

        document.body.style.overflow = 'visible'; // <-- toggle back to normal mode
    }

}

Answer 3

對<html>和<body>標簽使用以下CSS樣式，

<style>
    html,
    body {
        margin: 0;
        height: 100%;
        overflow: hidden;
    }
</style>

以及以下javascript代碼來設置<canvas id="canvas"><canvas>元素的width和height ，

<script>
    var canvas = document.getElementById('canvas');
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
</script>

Answer 4

如果進入全屏模式並使用開發人員工具設置visibility: hidden在畫布上，則可以看到畫布后面的頁面內容太大，從而導致滾動條出現。 通過設置display: none我可以擺脫滾動條display: none頁面頁腳上display: none 。 在全屏模式下，您可以切換頁腳或其他內容的display屬性，因為無論如何它都會被畫布覆蓋。

畫布切換填充整個頁面並刪除滾動條

問題描述

4 個解決方案

解決方案1
3 2015-07-02 07:33:20

解決方案2
2 已采納 2014-11-04 21:31:39

解決方案3
1 2017-09-28 07:11:37

解決方案4
0 2014-11-04 21:32:49

畫布切換填充整個頁面並刪除滾動條

問題描述

4 個解決方案

解決方案1 3 2015-07-02 07:33:20

解決方案2 2 已采納 2014-11-04 21:31:39

解決方案3 1 2017-09-28 07:11:37

解決方案4 0 2014-11-04 21:32:49

解決方案1
3 2015-07-02 07:33:20

解決方案2
2 已采納 2014-11-04 21:31:39

解決方案3
1 2017-09-28 07:11:37

解決方案4
0 2014-11-04 21:32:49