不必要的，不需要的垂直垂直滾動條

Question

這個主題已被多次詢問和回答，但我嘗試了幾乎所有給出的解決方案，但沒有解決我的問題。 我在一個 div 中有一個方形 canvas 元素，該元素擴展到覆蓋所有可用屏幕。 當屏幕處於橫向模式時，我們希望用戶垂直滾動 canvas 繪圖以查看它。 這完美地工作。 當屏幕調整大小或將方向更改為縱向時，我們希望用戶水平滾動 canvas 繪圖。 這也可以按預期工作。 但是一旦用戶調整屏幕大小（甚至調整一個像素），就會出現一個垂直滾動條，它只會將 canvas 繪圖移動幾個像素。 通過重新加載頁面（保持相同大小），垂直滾動條消失了，很奇怪。 同樣在縱向和橫向之間的過渡中，存在瀏覽器不穩定。

我已經花了一個周末嘗試各種方法來解決這個問題，並編寫了一個小程序來顯示滾動條的奇怪外觀。 請幫忙。 CSS 不是我的強項。

 var canvasSize = 0; var ctx; var canvas; function init() { canvas = document.getElementById('myCanvas'); if (canvas.getContext) { ctx = canvas.getContext("2d"); // I add listeners to dynamically redraw the canvas when the user changes orientation/size window.addEventListener('resize', resizeCanvas, false); window.addEventListener('orientationchange', resizeCanvas, false); resizeCanvas(); } else { alert("ERROR: APPLICATION CANNOT RUN ON THIS DEVICE"); return; } } function resizeCanvas() { let viewPortWidth = document.getElementById("radarScreen").clientWidth; let viewPortHeight = document.getElementById("radarScreen").clientHeight; let portaitMode = (viewPortHeight > viewPortWidth)? true: false; if (portaitMode) { // IN PORTAIT MODE I WANT TO HAVE HORIZONTAL SCROLLBAR TO VIEW THE HIDDEN PART OF THE CANVAS // UNFORTUNATELLY A GET ALSO A VERTICAL SCROLLBAR THAT MOVES THE CANVAS A FEW PIXELS UP/DOWN console.log("portait mode ON"); canvas.width = viewPortHeight; canvas.height = viewPortHeight; } else { /* landscapeMode */ // IN LANDSCAPE MODE I WANT TO HAVE A VERTICAL SCROLLBAR TO VIEW THE HIDDEN PART OF THE CANVAS // UNFORTUNATELLY A GET ALSO A HORIZONTAL SCROLLBAR THAT MOVES THE CANVAS A FEW PIXELS UP/DOWN canvas.width = viewPortWidth; canvas.height = viewPortWidth; } // INSPECTING THE HTML GIVES NO CLEW WHERE THESE SCROLLBARS ARE CREATED canvasSize = canvas.width; // now we need to redraw the canvas ctx.clearRect(0, 0, canvasSize, canvasSize); ctx.strokeStyle = "black"; ctx.lineWidth = 0.2 * canvasSize; ctx.beginPath(); ctx.rect(0, 0, canvasSize, canvasSize); ctx.stroke(); ctx.font = "80px Arial"; ctx.fillStyle = "red"; ctx.textAlign = "center"; if (portaitMode) ctx.fillText("Portrait ", canvasSize / 2, canvasSize / 4); else ctx.fillText("Landscape ", canvasSize / 2, canvasSize / 4); }

 * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; } #radarScreen { display: block; height: 100%; width: 100%; } canvas { background-color: #777; }

 <body onload='init()'> <!-- RADAR SCREEN CANVAS SECTION --> <div id="radarScreen"> <canvas id="myCanvas"></canvas> </div> </body>

Answer 1

我不確定是什么導致了滾動； 欄出現，但這是一種似乎可以解決問題的變通方法。

#radarScreen {
  display: block;
  height: 100%;
  width: calc(100% - 1px);
}

不必要的，不需要的垂直垂直滾動條

問題描述

1 個解決方案

解決方案1
0 2021-12-06 00:27:12

不必要的，不需要的垂直垂直滾動條

問題描述

1 個解決方案

解決方案1 0 2021-12-06 00:27:12

解決方案1
0 2021-12-06 00:27:12