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

HTML/CSS/Sass

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

やり方

CSSで調整する!以下のモーダルのエレメントにプロパティを追加すればOK。

overflow: auto;
overflow: scroll;

縦方向だけに適用させたい時は、Y軸指定をする。

overflow-y: auto;
overflow-y: scroll;

横方向だけに適用させる時は、X軸を指定。

overflow-x: auto;
overflow-x: scroll;

それでも上手くいかないとき

モーダルに高さが指定されていないとき、適用されない場合があるので、高さを指定してみてください。

タイトルとURLをコピーしました