position: fixed内でスクロールを有効にする方法と注意点

position: fixed を使用して画面上に固定表示される要素を作ることは多いですが、その中で縦スクロール（overflow-y: scroll;）を有効にしようとすると、うまく動作しない場合があります。

この記事では、position: fixedの要素内でスクロールを有効にするための具体的な方法と、よくある注意点について解説します。

1. 基本的な設定

スクロールを有効にするためには、固定表示される要素の子要素に高さを明示的に指定する必要があります。以下の例を見てみましょう。

HTML

<div class="fixed-container">
  <div class="scroll-content">
    <!-- スクロールしたい長いコンテンツ -->
  </div>
</div>

CSS

.fixed-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 親要素の高さを固定 */
  background: rgba(0, 0, 0, 0.5);
}

.scroll-content {
  height: 80vh; /* 高さを指定してスクロール領域を作成 */
  overflow-y: scroll; /* 縦スクロールを有効化 */
  padding: 20px;
  background: #fff;
}

ポイント

.fixed-container は画面全体を覆うために height: 100%; を指定しています。
.scroll-content に高さを設定することで、スクロール可能な領域が作られます。

2. 100vh以上の高さを設定した場合の問題点

scroll-content に 100vh 以上の高さを指定すると、画面サイズを超えてしまい、以下のような問題が発生します。

スクロールが機能しない: スクロール可能な範囲が画面の外にあるため、アクセスできません。
ユーザーエクスペリエンスの低下: 必要なコンテンツが見えない、またはスクロールが効かない状況が発生します。

例えば、 height: 120vh; を設定すると、見た目でははみ出している部分が存在しますが、スクロールしてもアクセスできない可能性があります。

3. 解決策とベストプラクティス

解決策

高さを動的に計算して、画面サイズに収まるよう調整するのが安全です。例えば、以下のように高さを calc() で設定することができます。

CSS

.scroll-content {
  height: calc(100vh - 20px); /* ヘッダーやマージンを考慮して調整 */
  overflow-y: scroll;
}

ベストプラクティス

100vh 以下の高さに抑える（例: 80vh, 90vh）。
必要に応じて calc() を使って柔軟に高さを調整する。
スクロールが必要な領域だけに overflow-y: scroll; を適用する。

4. まとめ

position: fixed内でスクロールを有効にするためには、高さの設定が重要です。特に、100vhを超える高さを指定すると、スクロールが正常に機能しなくなる可能性があるため注意しましょう。

もし、100vh以上の高さが必要な場合は、スクロールする親要素を調整するか、全体の構造を見直すことをおすすめします。

これで、固定表示とスクロールを組み合わせたUIをスムーズに作ることができます。ぜひ参考にしてみてください！