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

Question

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

6

我在我的页面上有一个画布，希望能切换它充满整个页面或返回原状态。我的页面通常比屏幕高，因此页面上会出现滚动条。当我在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

- patsimm

我在最新的Firefox v33.0.2上看不到滚动条。 - Hacknightly

我正在使用Firefox v33.0，屏幕比较小的笔记本电脑上肯定有滚动条。Chrome v38.0.2125.111也有同样的问题。 - patsimm

你尝试过在全屏模式下将 height: 100%; overflow:hidden 应用于 html 和 body 吗？在控制台中输入

(function() { var s = document.createElement("style"); s.type = "text/css"; s.textContent = "html,body { height: 100%; overflow: hidden; }"; document.head.appendChild(s); })();

看起来可以解决这个问题。 - canon

4个回答

8

尝试在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
    }

}

- Hacknightly

那个滚动条消失的方法很有效，谢谢！但是画布总是显示在页面的顶部，所以如果你切换到全屏模式并不在顶部，你会看到画布的一半和页面的另一半。 - patsimm

1

在将溢出设置为隐藏之前，尝试将页面的scrollTop设置为0。 - Hacknightly

1

太棒了！非常感谢！ - patsimm

3

使用以下的 CSS 样式来调整 <html> 和 <body> 标签，

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

以下是设置 <canvas id="canvas"><canvas> 元素的 width 和 height 的 javascript 代码：

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

- Yas

1

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

- jwnace

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sunderls · Accepted Answer

这与 <canvas> 标签有关。

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

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