ホームページ > ウェブフロントエンド > CSSチュートリアル > DIV スクロール バーのプロパティとスタイルを設定する方法の概要

DIV スクロール バーのプロパティとスタイルを設定する方法の概要

黄舟
リリース: 2017-11-17 09:43:37
オリジナル
4250 人が閲覧しました

DIVスクロールバーはDIVタグを利用して内部にCSSスタイルシートを埋め込みます。divで定義した領域の内容が一定レベルになったら、divタグ内にCSSスタイルシートを埋め込み、overflow属性値を定義して設定します。 DIV スクロール バー関連の属性。

ここでは、p スクロール バーのプロパティとスタイル設定について説明します。このように、p スクロール バーは、コンテンツ内に CSS スタイル シートを埋め込み、オーバーフロー属性値を追加します。スクロールバーは、特定の手順が必要な場合に便利です。

pスクロールバーの属性とスタイル設定

いわゆるpスクロールバーは、pタグを使用して内部にCSSスタイルシートを埋め込み、オーバーフロー属性値を追加することで、領域内のコンテンツを規制します。 by p が特定の値に達するまで スクロール バーはプログラミング時に便利です。その機能はおそらくページスペースを節約すること、いわゆる「スペースの縮小」です。

pで定義した領域の内容が一定レベルになったら、pタグ内にcssスタイルシートを埋め込み、overflowの属性値を定義し、pスクロールバーに関する属性を設定します。

サンプルコード:

<styletylestyletyle="text/css"> 
.testDiv{  
border-style:solid;  
border-width:50px;  
border-color:pink;  
 
position:absolute;  
top:200px;  
left:300px;  
height:200px;  
width:300px;  
 
overFlow-x:scroll;  
overFlow-y:hidden;  
 
scrollBar-face-color:green;  
scrollBar-hightLight-color:red;  
scrollBar-3dLight-color:orange;  
scrollBar-darkshadow-color:blue;  
scrollBar-shadow-color:yellow;  
scrollBar-arrow-color:purple;  
scrollBar-track-color:black;  
scrollBar-base-color:pink;  
 
}  
 
</style>
ログイン後にコピー

注:

1.overFlow:

visibleは価値を節約し、スクロールバーはなく、領域のサイズはコンテンツに応じて自動的に拡張されます。は、定義された領域が無効です

scroll スクロールバーを表示します

hidden スクロールバーがなく、領域を超えた内容は表示されません

autoは内容に基づいてスクロールバーを追加するかどうかを自動的に決定します

2.pスクロールバーの色の属性:

face-color: スライダーの色

hightlight-color: ハイライトの色

3dlight-color: 三次元の光の色

darkshadow-color: 影の色

shadow- color: 影の色

arrow-color: 矢印の色

track-color: トラックの色

base-color: スクロール ボタンとスクロール スライダーを含むスクロール バーのメインの色

3.overFlow-xoverFlow- y

visibleは値を保存し、pスクロールバーなしで、内容に応じて自動的に領域を拡張します サイズ、つまり定義された領域は無効です

scrollは常にスクロールバーを表示します

hidden pスクロールバーはありません、そしてエリア外のコンテンツは非表示になります

コンテンツに基づいてスクロールバーを追加するかどうかを自動的に決定します

  1. パズルを解く専門家 p とはどういう意味ですか?

  2. JavaScriptp属性とスタイルの動的作成

  3. SPAN要素とp要素の違い

  4. CSS2.0におけるpage-break-after属性の使用法

  5. border:noneの探索; CSS での border:0;

概要:

この記事では、p スクロール バーのプロパティとスタイル設定について説明します。いわゆる p スクロール バーは p タグを使用します。 CSS スタイルシートを埋め込むには、overflow の属性値を追加します。これにより、p で規定された領域のコンテンツが一定のレベルに達したときにスクロール バーが便利になります。

関連する推奨事項:

CSS コントロール スクロール バー スタイルの分析


CSS3 カスタム スクロール バー スタイルの詳細な例


CSS設定 divスクロールバースタイルの例

以上がDIV スクロール バーのプロパティとスタイルを設定する方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート