3

この件は何度も質問され、回答されてきましたが、与えられたほとんどすべての解決策を試しましたが、私のケースは解決されませんでした。使用可能なすべての画面をカバーするように拡張された div 内に正方形のキャンバス要素があります。画面が横向きモードの場合、ユーザーがキャンバスの描画を垂直方向にスクロールして表示できるようにします。これは完全に機能します。画面のサイズが変更されたり、縦向きに変更されたりした場合、ユーザーはキャンバスの描画を水平方向にスクロールする必要があります。これも意図したとおりに機能します。しかし、ユーザーが画面のサイズを (1 ピクセルでも) 変更するとすぐに、キャンバスの描画を数ピクセルだけ移動する垂直スクロールバーが表示されます。ページをリロードすると（同じサイズを維持して）、垂直スクロールバーが消えます。非常に奇妙です。また、ポートレートからランドスケープへの移行時に、ブラウザが不安定になります。

私はすでに週末を費やして問題を解決するためのさまざまな方法を試し、スクロールバーの奇妙な外観を示す小さなプログラムを作成しました。助けてください。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>

4

1 に答える 1