CSS 」 オーバーフロー 」プロパティは、選択した HTML 要素のコンテンツのオーバーフローを制御するために利用されます。コンテンツは、「」の助けを借りて特定の方向に制御できます。 オーバーフローっぽい ' と ' オーバーフロー-X ' プロパティ。 「オーバーフロー」プロパティは「」のような値を受け入れます。 スクロール ”、” 見える ”、” 隠れた ' と ' 自動 」と機能が異なります。ただし、このガイドでは、実際の例を使用して、overflow:scroll と overflow:auto の違いを説明します。
overflow:scroll と overflow:auto の違いは何ですか?
「」の主な違いは スクロール ' と ' 自動 ” の価値観は、” オーバーフロー:スクロール 」は、必要かどうかに関係なく常にスクロールバーを表示し、視覚的に気が散ってしまいます。一方で、「 オーバーフロー:自動 」は、コンテンツがオーバーフローした場合にのみスクロールバーを表示します。このようにして、ユーザーの注意を引きやすい、よりクリーンで合理化されたデザインを作成できます。
例 1: overflow:scroll プロパティの使用
CSS 」 オーバーフロー:スクロール 」プロパティは、オーバーフローしたコンテンツを制御するためにデフォルトでスクロールバーを設定します。オーバーフロー コンテンツは表示されず、スクロールバーが適用されます。代わりに、コードのコンパイル後に水平および垂直スクロール バーが表示されますが、ユーザーは設計の要件に応じてサイド スクロールバーのみを変更して表示できます。
「overflow:scroll」プロパティを利用するには、以下のコードにアクセスしてください。
< ディビジョン >
< h3 > 例 ために オーバーフロー:スクロール h3 >
< ディビジョン クラス = 「scrollingBox スクロール」 >
< p > これは単なるダミーコンテンツです ために overflow-y プロパティ値のスクロールと自動の違いのデモ。
p >
ディビジョン >
ディビジョン >
上記のコード ブロックでは次のようになります。
- まずはルート「 ディビジョン ” 要素が作成され、ネストされた “ ”タグが入っています。
- 次に「」のクラスを割り当てます。 スクロールボックス ' と ' スクロール すでに作成されているネストされた「」に「」を追加します。
' 鬼ごっこ。- 最後に「」にダミーデータを与えます。 ' と ' 「」内のタグ ディビジョン 」要素。
HTML 構造の作成後、CSS オーバーフロー プロパティを適用します。
< スタイル >
.scrollingBox {
幅: 300ピクセル;
高さ: 150ピクセル;
ボーダー: 1px ソリッドダークグレー;
}
。スクロール {
オーバーフロー: スクロール;
}
スタイル >上記の CSS コードの説明:
- まず、「」を選択します。 スクロールボックス ” クラスを作成し、” の値を提供します 300ピクセル ”、” 150ピクセル ' と ' 1px ソリッドダークグレー 「CSSへ」 幅 ”、” 身長 '、 と ' 国境 ' プロパティ。これらのプロパティは、視覚化プロセスを改善するために利用されます。
- 次に、「 スクロール ” クラスが選択されており、” の値は スクロール ” が CSS に渡されます” オーバーフロー ' 財産。
コンパイルフェーズの終了後:
上記の出力は、コンテンツがオーバーフローしていないが、X 軸と Y 軸の両方にスクロールバーが追加されていることを示しています。
例 2: overflow:auto プロパティの使用
overflow:auto プロパティは、どちらもスクロールバーを表示できるため、overflow:scroll と似ています。唯一の違いは、「 オーバーフロー:自動 」は、コンテンツがオーバーフローした場合にスクロールバーを追加し、コンテンツがオーバーフローしていない場合はスクロールバーを追加しません。動的に変化する性質のため、主にレスポンシブ Web デザインの作成中に使用されます。
たとえば、以下のコードにアクセスしてください。
< ディビジョン クラス = 「自動例」 >
< h3 > 例 ために オーバーフロー:自動 h3 >
< ディビジョン クラス = 「スクロールボックス」 スタイル = 「オーバーフロー: 自動」 >
< p > これは単なるダミーコンテンツです ために overflow-y プロパティ値のスクロールと自動の違いのデモ。
p >
ディビジョン >
ディビジョン >上記のコード ブロックでは次のようになります。
- まず、同じ HTML 構造を利用し、「」にダミーデータを提供します。 h3 '、 と ' p 」の要素が変更されます。
- 次に、「 スタイル ” 属性は、内側にネストされた” で利用されます。 ディビジョン ”要素を追加し、”の値を設定します 自動 「CSSへ」 オーバーフロー ' 財産。
処刑後は、「 ディビジョン ” 要素は次のように表示されます。
上のスナップショットは、コンテンツの長さに応じてスクロールバーが追加されていないことを示しています。
さて、「」についてもう少し詳しく説明します。 オーバーフロー:自動 ' 財産。ネストされた「」に大量のデータを提供してみてください。 ディビジョン ' エレメント。コードを更新すると、Web ページは次のようになります。
出力は、オーバーフロー コンテンツの存在によりスクロールバーが追加されたことを確認します。
結論
” オーバーフロー:スクロール ' と ' オーバーフロー:自動 」プロパティは、スクロールバーを追加する状況が異なります。 「overflow:scroll」は、コンテンツがオーバーフローしているかどうかに関係なく、常にスクロールバーを表示します。一方、「overflow:auto」は、選択した HTML 要素のコンテンツがオーバーフローしている場合にのみスクロールバーを表示します。 CSSの値「 オーバーフロー 」プロパティは、特定のデザインとユーザー エクスペリエンスの要件によって異なります。この記事では、「overflow:scroll」プロパティと「overflow:auto」プロパティの違いを説明しました。
- 次に「」のクラスを割り当てます。 スクロールボックス ' と ' スクロール すでに作成されているネストされた「」に「」を追加します。