【CSS Modules】overflow-yプロパティの使い方

overflow-yプロパティは、要素の垂直方向（Y軸）のコンテンツがその要素の境界からはみ出した際に、そのはみ出しをどのように処理するかを保持するプロパティです。このプロパティを使用することで、Webページやアプリケーションにおいて、コンテンツの量によってレイアウトが崩れるのを防ぎ、ユーザーが全ての情報を効率的に閲覧できるように表示を管理します。

このプロパティには、主に以下の値を設定できます。visibleは、はみ出したコンテンツもそのまま表示するデフォルトの挙動です。コンテンツは要素の境界を越えて表示されます。hiddenを設定すると、はみ出したコンテンツは表示されず、指定された要素の領域で切り捨てられます。この場合、垂直スクロールバーは表示されません。scrollを設定すると、コンテンツがはみ出すかどうかにかかわらず、常に垂直スクロールバーが表示されます。これにより、ユーザーはいつでもスクロール操作が可能になります。最後にautoは、コンテンツが要素の垂直方向の境界からはみ出す場合にのみ垂直スクロールバーが表示される値です。コンテンツがはみ出さない場合はスクロールバーは表示されません。

このプロパティは、例えばチャット履歴や長いテキストコンテンツを固定サイズの領域内に表示したい場合など、内容が縦方向に長くなる可能性がある場合に特に有効です。要素の領域を超過するコンテンツの表示を適切に管理し、Webサイトやアプリケーションのユーザーインターフェースの一貫性を保つために重要な役割を果たします。

Copy
1.element-with-vertical-overflow {
2  height: 200px;
3  overflow-y: scroll;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません