備忘録的プログラミングリファレンス

overflow-yプロパティ

 overflow-y プロパティは、エレメントの内容が縦方向にはみ出るとき(オーバーフロー)の表示方法を指定するプロパティです。そのまま( visible )、はみ出る部分を表示しない( hidden )、スクロールを付ける( scroll, auto )といったことができます。

 overflow-y プロパティが機能するには、height プロパティなどでエレメントのサイズが固定されていることが条件です。

縦方向に内容がはみ出るようならスクロール表示(Exampleを参照
height: 300px;
overflow-y: scroll;

 横方向に内容がはみ出る場合は、overflow-xプロパティ、またはoverflowプロパティを使います。
 overflow-y、overflow-xは縦、横を個別に指定することができます。

ページ内 Index

構文(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 AnimationNo

Example

 overflow-yの例です。親エレメントid="over"のサイズよりも子エレメントid="contents"のサイズを大きく指定しています。 そのために親エレメントの縦側にスクロールが表示されます。
 エレメントがブロックレベルエレメントであることと、heightプロパティでサイズが固定されていることが条件です。