この記事では、CSS の overflow-y プロパティの使用法を多数の例とともに示します。
CSS で Overflow-y プロパティを使用するには?
CSS 」 オーバーフローっぽい 」プロパティは、要素内の横軸に沿ったコンテンツのオーバーフローを制御するために利用されます。コンテンツがコンテナの高さを超える場合に、コンテンツをクリップするか、スクロールバーを追加するかを指定します。このプロパティに指定できる値は次のとおりです。 見える ”、” 隠れた ”、” スクロール '、 と ' 自動 ”。
overflow-y プロパティをよりわかりやすくデモンストレーションするために、以下の例を参照してください。
例 1: Overflow-y プロパティの値として Visible を使用する
” 見える 」値を指定すると、コンテンツがコンテナからオーバーフローすることが許可され、クリッピングやスクロールバーは追加されません。以下の実践的なコード ブロックにアクセスしてください。
>
>
>
上記のコード ブロックの説明:
- まず、「」の値を割り当てます。 親 ”へ” クラス ” 属性を使用し、” スタイル ' 属性。
- さらに、「」の値を提供します。 見える 「CSSへ」 オーバーフローっぽい ' 財産。そしてそれを「」と等しく設定します スタイル ” 属性を使用して CSS スタイルを機能させます。
- 次に、ネストされた「」を作成します。 ディビジョン ” 要素を作成し、それに “ のクラスを割り当てます。 子コンテンツ ”。また、ダミーデータを与えてください。
ここで、CSS プロパティを利用して視覚化を強化します。これは、CSS overflow-y プロパティをより深く理解するのに役立ちます。
。親 {幅 : 200ピクセル ;
身長 : 150ピクセル ;
国境 : 1ピクセル 個体 黒 ;
}
.childContent {
身長 : 300ピクセル ;
背景色 : ライトブルー ;
}
CSS プロパティの説明は次のとおりです。
- まず、「 親 ” クラスが選択され、” の値が 200ピクセル ”、” 150ピクセル '、 と ' 1px ソリッドブラック ” が CSS ” に割り当てられます。 幅 ”、” 身長 '、 と ' 国境 」プロパティをそれぞれ。
- 次に「」を選択します。 子コンテンツ ” クラスを作成し、” の値を設定します 300ピクセル ' と ' ライトブルー 「CSSへ」 身長 ' と ' 背景色 」プロパティをそれぞれ。このクラスは「」まで拡張されます。 親 「CSSで制御されるクラス」 オーバーフロー ' 財産。
コード スニペットをコンパイルすると、Web ページは次のように表示されます。
スナップショットには、オーバーフロー コンテンツが表示され、デフォルトではスクロールバーまたはクリッピングが追加されていないことが表示されます。
例 2: Overflow-y プロパティの値として Hidden を使用する
” オーバーフローっぽい ” の値を持つ” プロパティ 隠れた 」は、親コンテナの外に移動するすべてのコンテンツを非表示にします。このプロパティはスクロールバーを追加せず、代わりにオーバーフローしたコンテンツをクリップします。
>
>
上記のコード スニペットには次のものが含まれています。
- まず、同じコードが再度挿入され、内側の div 要素内に配置されるダミー コンテンツが増加します。
- 次に、「」の値を変更します。 オーバーフローっぽい 「プロパティを」に 隠れた ”へ” クラスが「」のタグ 親 ”。
再レンダリング後の Web ページは次のようになります。
スナップショットには、オーバーフロー コンテンツがクリップされたことが表示されます。
例 3: Overflow-y プロパティの値として Scroll を使用する
「」の値を設定する オーバーフローっぽい 「」プロパティを「」に スクロール 」を使用すると、エンド ユーザーはスクロールできます。
そこから溢れるコンテンツ。以下のコード ブロックにアクセスしてみましょう。
= '親' スタイル = 'オーバーフロー-y: スクロール;' >
= 「子コンテンツ」 > これはただのダミーです コンテンツ これは、overflow-y プロパティが可視に設定されている場合のデモンストレーションに使用されます。これはただのダミーです コンテンツ これは、overflow-y プロパティが可視に設定されている場合のデモンストレーションに使用されます。
>
>上記のコード ブロックでは次のようになります。
- まず、同じ HTML 構造が「」内に挿入されています。 <本文> ' 鬼ごっこ。
- 次に、「」の値を変更します。 オーバーフローっぽい 「」プロパティを「」に スクロール ”。これにより、「 親 ” div を使用して、オーバーフローしたコンテンツを制御するスクロール効果を有効にします。
上記のコード ブロックをコンパイルすると、Web ページは次のように表示されます。
上記の gid は、オーバーフローしたコンテンツを制御するためにスクロール効果が利用可能であることを示しています。
例 4: Overflow-y プロパティの値として Auto を使用する
この例では、コンテンツがコンテナー内に収まらない場合にのみ、ユーザーはスクロールバーを追加できます。また、コンテンツがオーバーフローしない場合、スクロールバーは追加されません。という値を提供することで可能になります。 自動 「CSSへ」 オーバーフローっぽい ' 財産：
= '親' スタイル = 'オーバーフロー-y: 自動;' >
= 「子コンテンツ」 > これはただのダミーです コンテンツ これは、overflow-y プロパティが可視に設定されている場合のデモンストレーションに使用されます。これはただのダミーです コンテンツ これは、overflow-y プロパティが可視に設定されている場合のデモンストレーションに使用されます。
>
>上記のコード ブロックでは次のようになります。
- まず、同じHTMLファイルを「」内に挿入します。 <本文> ' 鬼ごっこ。
- 次に、「」の値を更新します。 オーバーフローっぽい 「プロパティを」に 自動 ”。コンテンツの垂直方向の長さに応じたスクロール効果を有効にします。
コンパイル プロセスが終了すると、Web ページは次のように動作します。
上の gif は、コンテンツの長さに応じてスクロールバーを有効にしたオーバーフロー プロパティを示しています。
結論
CSS 」 オーバーフローっぽい 」プロパティは、要素内の横軸に沿ってオーバーフローしたコンテンツを制御するために利用されます。 overflow-y プロパティは、overflow-y プロパティに指定された特定の値に従ってコンテンツを制御します。 ” ビジュアル ” 値はオーバーフローしたコンテンツを表示します。 隠れた ” 値はオーバーフローコンテンツを非表示にし、” スクロール 」値は、コンテンツを制御するスクロールバーを追加します。そして値が「」の場合 自動 」 スクロールバーはコンテンツの長さに応じて追加または削除します。