CSS を使用して Div を垂直スクロール可能にする

Web サイトで使用したいコンテンツは大きく、多くのスペースを占める可能性があります。つまり、Web サイトの他の要素が置き換えられ、Web サイトの応答性に影響を与える可能性があります。 Webサイト。これを回避するには、ユーザーが興味を持ったら下にスクロールしてコンテンツ全体を読めるように、スクロール可能なコンテンツをユーザーに提供する必要があります。

この記事では、div を垂直方向にスクロールする方法と、これを実現するために使用するプロパティについて説明します。

div を垂直にスクロールするにはどうすればよいですか?

overflow 属性には複数の値を入力できるため、DIV を垂直にスクロールさせるために overflow 属性を使用できます。 hiddenやautoなどの値もいくつかあります。使用された値に基づいて水平スクロールバーと垂直スクロールバーを作成できます。 auto 値を使用すると、垂直スクロールバーを取得できます。オーバーフロー属性の構文を見てみましょう:

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

x 軸と y 軸を使用し、x 軸のプロパティを非表示に、y 軸のプロパティを自動に設定します。これにより、水平スクロール バーが非表示になり、垂直スクロール バーのみが表示されます。必要なものを自動的に取得します。

＃＃＃例＃＃＃

この例では、div を宣言し、オーバーフロー属性を追加して div を垂直方向にスクロールする段落を記述します。

リーリー

上記のコードでは、オーバーフロー プロパティを使用し、その X 軸を非表示に、Y 軸を表示に変更しました。これにより、ここで記述している段落に垂直スクロール バーが表示されます。コードの実行から得られる出力を見てみましょう。

上記の出力を見ると、下にスクロールするために使用できる垂直スクロール可能なバーがあることがわかります。

注意

・overflow属性を使用する場合は「ブロック要素」の要素を指定しないと動作しない場合があります。使用されているコンテンツが大きすぎて指定された領域に収まらないため、このプロパティは主にコンテンツをクリップしたり、スクロール可能なバー (垂直方向または水平方向) を追加したりするために使用されます。

このプロパティをよりよく理解するために、別の例を見てみましょう。 ＃＃＃例＃＃＃ この例では、プロパティの x 軸と y 軸を変更する代わりに、プロパティの値を auto に設定して、div を垂直にスクロールします。コードは次のとおりです:

リーリー

上記のコードでは、オーバーフロー属性の値を非表示の X 軸と自動 Y 軸から自動に変更し、同じ例を使用して出力結果を確認しました。このコードが生成する出力を見てみましょう。

上記の出力を見ると、オーバーフロー プロパティに auto 値を指定しても、スクロールバーがまだ存在していることがわかります。

＃＃＃結論は＃＃＃

オーバーフロー プロパティは、多くのスペースを占めるコンテンツをクリップするために広く使用されています。または、ユーザーが下にスクロールするためのスクロール バーを追加して、Web ページ上で占有される全体のスペースを削減したい場合。

この記事では、overflow 属性の使用方法と div に垂直スクロールバーを追加する方法、および overflow 属性で使用される値について学びました。

以上がCSS を使用して Div を垂直スクロール可能にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。