CSS の overflow: auto と overflow:scroll の違いは何ですか?

CSS では、「overflow」属性を使用して、HTML 要素のコンテンツのオーバーフローを指定します。たとえば、div 要素の高さが「500px」で、内部コンテンツの高さが「1000px」の場合、コンテンツをスクロール可能にする必要があります。

このチュートリアルでは、CSS の「overflow」プロパティの「auto」値と「scroll」値の違いを学びます。

オーバーフロー: CSS での自動

CSS では、overflow: auto は HTML 要素のオーバーフローを auto に設定します。これは、div のコンテンツがオーバーフローした場合は、オーバーフロー プロパティの値に「scroll」を設定し、それ以外の場合は、オーバーフロー プロパティの値に「none」を設定することを意味します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って overflow: auto CSS プロパティを使用できます。

リーリー ＃＃＃例＃＃＃

以下の例では、HTML div 要素を作成し、「main」クラス名を指定しています。さらに、div 要素に固定の幅と高さを設定します。さらに、CSS プロパティ「overflow: auto」を設定します。

出力では、コンテンツのサイズが div 要素のサイズよりも大きいため、スクロール バーが表示されていることがわかります。

リーリー ＃＃＃例＃＃＃

以下の例では、div 要素の内部コンテンツのサイズが div 要素のサイズより小さくなります。出力では、コンテンツがオーバーフローしないため、div 要素がスクロールできないことがわかります。

リーリー

オーバーフロー: CSS でのスクロール

"overflow:scroll" は、要素のコンテンツがオーバーフローしない場合でも、HTML 要素に常にスクロール バーを表示し、常に水平および垂直スクロール バーを表示します。

＃＃＃文法＃＃＃ リーリー ＃＃＃例＃＃＃

以下の例では、div 要素のサイズに適合するコンテンツを div 要素に追加します。さらに、CSSを使用してdiv要素に「overflow:scroll」を設定します。

出力では、div 要素のコンテンツがオーバーフローしていないにもかかわらず、スクロール バーが表示されていることがわかります。

リーリー

overflow:auto と overflow:scroll の違い

これは、overflow:auto と overflow:scroll CSS プロパティの違いの表です。

オーバーフロー: 自動

オーバーフロー:スクロール

＃＃＃例＃＃＃ リーリー

HTML 要素のコンテンツがオーバーフローするか、元の要素のサイズに収まらない場合にのみスクロール バーを表示します。	常にスクロールバーが表示されます。
次の例では、overflow:scroll と overflow:automatic の出力を一緒に示します。クラス名「scroll」のdiv要素にoverflow:scrollを設定し、クラス名「auto」のdiv要素にoverflow:autoを設定します。 出力では、overflow:scroll はスクロールバーを表示しますが、overflow:auto は表示しないことがわかります。	ユーザーは、CSS プロパティ「overflow:auto」と「overflow:scroll」の違いを学習しました。 2 つの唯一の違いは、スクロールバーが表示されるかどうかです。

以上がCSS の overflow: auto と overflow:scroll の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。