畫布切換填充整頁移除滾動條

我在我的頁面上放置了一個畫布，並且想要將它切換爲填充頁面和向後。我的頁面通常是「高」，然後是屏幕高度，因此我的頁面上有一個滾動條。這種滾動條簡化版，隱藏當我設置我的畫布的大小一樣，在我的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頁 http://patsimm.github.io/mandelight/

我真的不知道當畫布處於「全屏」模式時如何刪除滾動條。每一個幫助都是絕好的！

謝謝！ patsimm

來源

2014-11-04 patsimm

我看不到滾動條在最新的火狐v33.0.2 – Hacknightly 2014-11-04 21:24:41

即時通訊使用Firefox v33.0和theres絕對滾動條。我的筆記本電腦有相當小的屏幕。 Chrome v38.0.2125.111也有同樣的問題。 – patsimm 2014-11-04 21:27:28

你有沒有試過應用'身高：100％;溢出：隱藏「HTML和身體，而在全屏模式？ '（function（）{var s = document.createElement（「style」）; s.type =「text/css」; s.textContent =「html，body {height：100％; overflow：hidden;}」; document .head.appendChild（s）;}）（）;'在控制檯似乎修復它。 – canon 2014-11-04 21:28:11

嘗試設置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 
    } 

}

來源

2014-11-04 21:31:39 Hacknightly

這適用於滾動條消失，謝謝！但是畫布始終顯示在頁面的頂部，所以如果切換到全屏不在頂部，則會看到畫布的一半和頁面其餘部分的一半。 – patsimm 2014-11-04 21:37:49

在將溢出設置爲隱藏之前，嘗試將body的scrollTop設置爲0。 – Hacknightly 2014-11-04 21:41:14

美麗！非常感謝你！ – patsimm 2014-11-04 21:45:12

如果你進入全屏模式，並使用開發工具來設置visibility: hidden在畫布上，你可以看到，畫布後面的頁面內容過大，導致出現滾動條。我能夠通過在頁面頁腳上設置display: none來擺脫滾動條。您可以在全屏模式下切換頁腳或其他內容的display屬性，因爲無論如何都會被畫布覆蓋。

來源

2014-11-04 21:32:49 jwnace

這有點事要做寬度<canvas>標記。

<canvas>如果未設置爲display:block，將導致滾動條。

細節：http://colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen

來源

2015-07-02 07:33:20 sunderls

使用以下CSS風格<html>和<body>標籤，

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

及以下javascript代碼來設置width和<canvas id="canvas"><canvas>元素height，

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

來源

2017-09-28 07:11:37 Yas

畫布切換填充整頁移除滾動條

回答

相關問題