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

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