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

【问题标题】：Canvas toggle filling whole page removing scrollbar画布切换填充整个页面删除滚动条
【发布时间】：2017-09-28 15:11:37
【问题描述】：

我的页面上有一个画布，我想将其切换到填充页面和向后切换。我的页面通常“高于”屏幕高度，因此我的页面上有一个滚动条。当我在我的 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/

当画布处于“全屏”模式时，我真的不知道如何删除滚动条。感谢您的每一次帮助！

谢谢！帕西姆

【问题讨论】：

我在最新的 Firefox v33.0.2 上看不到滚动条
我使用的是 Firefox v33.0 并且肯定有一个滚动条。我的笔记本电脑屏幕很小。 Chrome v38.0.2125.111 也有同样的问题。
您是否尝试在全屏模式下将height: 100%; overflow:hidden 应用于html 和正文？控制台中的(function() { var s = document.createElement("style"); s.type = "text/css"; s.textContent = "html,body { height: 100%; overflow: hidden; }"; document.head.appendChild(s); })(); 似乎可以修复它。

标签： javascript css html canvas

【解决方案1】：

这与宽度<canvas>标签有关。

<canvas>如果不设置为display:block会导致滚动条。

详情：http://colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen

【讨论】：

这应该是公认的答案。链接已经死了。
天才，非常感谢 :)
我很好奇，为什么 display:inline canvas 会导致滚动条？

【解决方案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
    }

}

【讨论】：

这样可以让滚动条消失，谢谢！但是画布始终显示在页面顶部，因此如果您切换到全屏而不是顶部，您会看到画布的一半和页面其余部分的一半。
在将溢出设置为隐藏之前尝试将 body 的 scrollTop 设置为 0。
漂亮！非常感谢！

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：