Question

我的页面上有一个画布，想要切换页面和向后翻页。我的页面通常是＆＃34;更高＆＃34;然后屏幕高度，所以我的页面上有一个滚动条。当我在我的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/

当画布处于＆＃34;全屏＆＃34;时，我真的不知道如何删除滚动条。模式。每一个帮助都是吝啬的！

谢谢！ patsimm

Answer 1

这有宽度<canvas>标记。

如果未设置为<canvas>，

display:block将导致滚动条。

详细信息：http://colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen

Answer 2

当您在overflow时，请尝试将hidden设为fullWindowState;

//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

对CSS和<html>代码使用以下<body>样式，

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

以及以下javascript代码，用于设置width元素的height和<canvas id="canvas"><canvas>，

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

Answer 4

如果进入全屏模式并使用开发人员工具在画布上设置visibility: hidden，则可以看到画布后面的页面内容太大，导致滚动条出现。通过在页脚上设置display: none，我能够摆脱滚动条。您可以在全屏模式下切换页脚或其他内容的display属性，因为无论如何它都会被画布覆盖。

画布切换填充整页删除滚动条

4 个答案: