画布切换填充整个页面并删除滚动条
[英]Canvas toggle filling whole page removing scrollbar
问题描述
I've got a canvas on my page and want to toggle it filling the page and backwards. 
我的页面上有一个画布，想要切换它以填充页面和向后。 My page is usually "higher" then a screens height so there is a scrollbar on my page. 我的页面通常“更高”然后是屏幕高度，因此页面上有一个滚动条。 This scroll-bar does't hide when I'm setting the size of my canvas like that in my css: 当我像在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;
}
My javascript looks like this: 我的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 = "";
}
}
The full code is on github too and the page is on gh-pages http://patsimm.github.io/mandelight/ 完整的代码也位于github上，页面位于gh-pages http://patsimm.github.io/mandelight/
I really don't know what to do to remove the scrollbar when the canvas is in "fullscreen" mode. 当画布处于“全屏”模式时，我真的不知道如何删除滚动条。 Every help is apreciated! 每一个帮助都很感谢！
Thanks! 谢谢！ patsimm patsimm
4 个解决方案
解决方案1
3 2015-07-02 07:33:20
This has something to do width <canvas> tag. 这与width <canvas>标签有关。
<canvas> will cause scrollbar if not set to display:block . 如果未将<canvas>设置为display:block则会导致滚动条。
detail: http://colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen 详细信息： http : //colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen
解决方案2
2 已采纳 2014-11-04 21:31:39
Try setting overflow to hidden when you're in fullWindowState ; 当您处于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
}
}
解决方案3
1 2017-09-28 07:11:37
Use the following CSS style for <html> and <body> tags, 对<html>和<body>标签使用以下CSS样式，
<style>
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
</style>
and the following javascript code to set width and height of the <canvas id="canvas"><canvas> element, 以及以下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
0 2014-11-04 21:32:49
If you go into full screen mode and use the developer tools to set visibility: hidden on the canvas, you can see that the page content behind the canvas is is too large, causing the scrollbars to appear. 如果进入全屏模式并使用开发人员工具设置visibility: hidden在画布上，则可以看到画布后面的页面内容太大，从而导致滚动条出现。 I was able to get rid of the scrollbars by setting display: none on the page footer. 通过设置display: none我可以摆脱滚动条display: none页面页脚上display: none 。 You could toggle the display property of the footer or other content while in full screen mode since it will be covered up by the canvas anyway. 在全屏模式下，您可以切换页脚或其他内容的display属性，因为无论如何它都会被画布覆盖。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.