モーダル内のみスクロールする方法

モーダルを表示した時、モーダル内のみスクロール可能にしたくて調べた記録です。

やり方
1. サンプル１
2. サンプル２（モーダルの内側にpaddingをつける）
それでも上手くいかないとき

やり方

CSSでできます🙆‍♀️
スクロールさせたい要素の親要素に、以下のCSSプロパティを付与します。

overflow: scroll;

縦方向のスクロールだけ適用させたい場合は、Y軸指定をします。

overflow-y: scroll;

横方向だけに適用させる場合は、X軸を指定します。

overflow-x: scroll;

サンプル１

HTML

<div class="overlay">
  <div class="modal">
    <div class="modal-content">Content</div>
  </div>
</div>

CSS

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal {
  width: 300px;
  height: 200px;
  padding: 16px;
  background-color: white;
  overflow: scroll; /* スクロール設定 */
}

.modal-content {
  min-height: 600px;
  background-color: lightblue;
}

サンプル２（モーダルの内側にpaddingをつける）

HTML

<div class="overlay">
  <div class="modal">
    <div class="modal-inner">
      <div class="modal-content">Content</div>
    </div>
  </div>
</div>

CSS

.overlay {
  position: fixed;
  inset: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal {
  width: 300px;
  height: 200px;
  padding: 16px; /* モーダルの内側のpadding */
  background-color: white;
}

.modal-inner {
  height: 100%;
  overflow: scroll; /* スクロール設定 */
}

.modal-content {
  min-height: 600px;
  background-color: lightblue;
}