HTMLタグのオーバーフロー処理アプリケーション_HTML/Xhtml_Webページ制作

CSS を使用してスクロール バーを装飾します
1. Overflow コンテンツがオーバーフローした場合の設定

overflow-x 水平方向のコンテンツがオーバーフローした場合の設定
overflow-y 垂直方向のコンテンツがオーバーフローした場合の設定
上記 3 つの属性で設定された値が表示されます (デフォルト値)、スクロール、非表示、自動。

2．スクロールバー-3d-light-color 3 次元スクロール バーの明るい端の色
scrollbar-arrow-color 上下ボタンの三角矢印の色
scrollbar-base-color の基本色スクロールバー
scrollbar-dark-shadow -color 3次元スクロールバーの強い影の色
scrollbar-face-color 3次元スクロールバーのはみ出し部分の色
スクロールバーの空白部分の色
scrollbar-shadow-color 3次元スクロールバーの影の色
上記7つの属性で設定される値はすべて色の値であり、スタイルシートで定義されたさまざまな表現が使用できます。

上記のスタイル定義コンテンツを使用すると、ブラウザ ウィンドウのスクロール バーと複数行のテキスト ボックスを表示するかどうかを指定でき、スタイル属性の最初のセットを使用してセットを表示するかどうかを設定できます。オブジェクトが表示される場合、2 番目のスタイル属性セットはスクロール バーの色を設定するために使用されます。この記事に含まれるスタイル属性は IE でのみサポートされることに注意してください。 IE5.5のバージョンでサポートされる予定ですので、デバッグの際はご注意ください。

上記のスタイル属性をいくつかの例で説明します。

1. ブラウザ ウィンドウにスクロール バーを持たないようにする
水平スクロール バーを持たない

垂直スクロール バーなし

スクロール バーなし
または

2. 複数行のテキスト ボックスのスクロール バーを設定します
水平スクロール バーはありません

コードをコピーします

コードは次のとおりです:

垂直スクロール バーなし

コードをコピー

コードは次のとおりです:

スクロールバーなし

コードをコピー

コードは次のとおりです。

</div><br /> または <br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode81'));"><u>コードをコピー</u></span></div>コードは次のとおりです:</div><div class="msgborder" id="phpcode81">< ;textarea style= "overflow:hidden">

3. ウィンドウのスクロール バーの色を赤に設定します
scrollbar-base-color は、通常、スクロール バーの色を変更する場合にのみこの属性を設定する必要があります。
少し特殊効果を追加します:

コードをコピーします コードは次のとおりです:

< body style= "scrollbar-arrow-color: yellow;scrollbar-base-color:lightsalmon ">

4. 他の要素を設定する場合も基本的に同じです。スタイル シートで設定することをお勧めします。ファイル内でクラスを定義して、再利用できるようにします。

コードをコピーしますコードは次のとおりです:

.coolscrollbar
{
スクロールバー-アローカラー:イエロー;
スクロールバーベースカラー:ライトサーモン;

上記のステートメントをスタイルシートファイルまたは