overflow-yプロパティ
overflow-y プロパティは、エレメントの内容が縦方向にはみ出るとき(オーバーフロー)の表示方法を指定するプロパティです。そのまま、はみ出る部分を表示しない、スクロールを付けるといったことができます。
overflow-y プロパティが機能するには、height プロパティなどでエレメントのサイズが固定されていることが条件です。
height: 300px; overflow-y: scroll;
横方向に内容がはみ出る場合は、overflow-xプロパティ、またはoverflowプロパティを使います。overflow-y、overflow-xは、エレメントの領域内に収まらない場合を個別に指定します。
構文(Syntax)
CSS
overflow-y: visible | hidden | scroll | auto | initial | inherit;
DOM ( JavaScript )
String = object.style.overflowY;
object.style.overflowY="visible | hidden | scroll | auto | initial | inherit";
値(Values)
Value | 摘要 |
---|---|
visible | 初期値(default値)、エレメント領域をはみ出して表示 |
hidden | エレメント内に収まらない部分は表示しない |
scroll | 内容が収まるようにスクロールバーを設定。印刷ではスクロールバーは無視されることがある |
auto | 内容が収まるようにスクロールバーを設定、内容が収まるならスクロールバーは設定されない |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | visible |
継承(Inherited) | No |
CSS Animation | No |
Example
overflow-yの例です。親エレメントid="over"のサイズよりも子エレメントid="contents"のサイズを大きく指定しています。
そのために親エレメントの縦側にスクロールが表示されます。
エレメントがブロックレベルエレメントであることと、heightプロパティでサイズが固定されていることが条件です。