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

overflow-yプロパティ

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

　横方向に内容がはみ出る場合は、overflow-xプロパティ、またはoverflowプロパティを使います。

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

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

構文(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プロパティでサイズが固定されていることが条件です。