【JavaScript入門】ウィンドウサイズとスクロール

　レスポンシブ・デザインや無限スクロールを実装するとき、ビューポート（表示領域）のサイズと現在のスクロール位置をリアルタイムに取得できると UI 制御がぐっと楽になります。ブラウザではそれらを window 直下のプロパティとメソッドで提供しており、数行のコードでスクロールの監視や自動スクロールが可能です。ここでは “最小セット” の API を整理し、サンプルで値の変化とスクロール操作を体験します。

１．ウィンドウサイズ・スクロール位置を得るプロパティ

プロパティ	返り値	説明
`innerWidth`	数値 (px)	ビューポートの幅。縦スクロールバーの幅を含む
`innerHeight`	数値 (px)	ビューポートの高さ。横スクロールバーの高さを含む
`scrollX`	数値 (px)	左上基準の水平スクロール量
`scrollY`	数値 (px)	左上基準の垂直スクロール量

resize や scroll イベントと組み合わせると、変化に応じて値を取得できます。

２．スクロールを操作するメソッド

メソッド	シグネチャ	動作
`scrollTo(x, y)`	絶対座標	指定座標へ一気にスクロール
`scrollBy(dx, dy)`	相対量	現在位置から相対的にスクロール

　scrollTo({top, left, behavior:'smooth'}) のようにオプションオブジェクトを渡すとスムーズスクロールも可能です（モダンブラウザ）。

３．実践サンプル ― 自動スクロールと情報パネル

ファイル名： scroll_monitor_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウサイズとスクロールのデモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/* わざと巨大なキャンバスを用意 */
body{margin:0;width:4000px;height:8000px;background:linear-gradient(135deg,#faf,#afe);}
#panel{
  position:fixed;top:0;left:0;z-index:10;
  background:#fff8c4;border:1px solid #fc0;
  font-family:monospace;padding:.6rem;line-height:1.4;
}
</style>
</head>
<body>
<pre id="panel">loading…</pre>

<script>
(() => {
  const panel = document.getElementById('panel');

  /* 情報パネルを更新する関数 */
  function renderInfo(){
    panel.textContent =
`innerWidth  : ${innerWidth}
innerHeight : ${innerHeight}
scrollX     : ${scrollX}
scrollY     : ${scrollY}`;
  }

  /* 200 ms ごとに右へ 30px / 下へ 60px スクロール */
  const mover = setInterval(() => {
    scrollBy(30, 60);
    renderInfo();
  }, 200);

  /* 4 秒後に中央付近へ移動し、自動スクロール停止 */
  setTimeout(() => {
    clearInterval(mover);
    scrollTo({
      left: document.body.scrollWidth  / 2 - innerWidth /2,
      top : document.body.scrollHeight / 2 - innerHeight/2,
      behavior: 'smooth'
    });
    // 0.5 秒後に最終値を描画
    setTimeout(renderInfo, 500);
  }, 4000);

  /* リサイズや手動スクロールでもパネル更新 */
  addEventListener('resize', renderInfo);
  addEventListener('scroll', renderInfo);

  /* 初期表示 */
  renderInfo();
})();
</script>
</body>
</html>

期待される動き

ページを開くと左上に黄色の情報パネルが現れ、innerWidth などが表示される。
0.2 秒ごとにビューポートが右下へ移動し、パネルの scrollX / scrollY が増加。
4 秒経つと自動スクロールが止まり、スムーズにページ中央へジャンプ。パネルは新しい座標を表示する。
ウィンドウをリサイズしたり、手動でスクロールしても数値がリアルタイム更新される。

プログラム解説

行	処理内容
`scrollBy(30, 60)`	相対スクロールで「右下方向」へ移動
`setInterval` + `setTimeout`	一定間隔で動かし、4 秒後に停止
`scrollTo({behavior:'smooth'})`	中央へスムーズスクロール
`renderInfo()`	4 つのプロパティをテンプレート文字列で整形し `<pre>` へ出力
`resize` / `scroll` イベント	手動操作時も常に最新値を表示

まとめ

ビューポート寸法は innerWidth / innerHeight、現在位置は scrollX / scrollY で取得。
scrollTo と scrollBy を使い分ければ、絶対・相対どちらのスクロールも簡単。
resize と scroll イベントを監視して値を再描画すれば、レスポンシブな情報パネルや進捗バーを実装できる。

　サンプルをコピーして値やスクロール量を変えながら実行し、ウィンドウサイズとスクロール API の挙動を体感してみてください。