HTMLタグオーバーフロー処理アプリケーション

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

水平方向のコンテンツオーバーフローのoverflow-x設定
垂直コンテンツのオーバーフローの overflow-y 設定上記の 3 つのプロパティは、visible (デフォルト値)、scroll、hidden、auto に設定されています。

2. scrollbar-3d-light-color3次元スクロールバーの明るい端の色
scrollbar-arrow-color上下ボタンの三角形の矢印の色
scrollbar-base-color スクロールバーの基本色
scrollbar-dark-shadow-color 3次元スクロールバーの濃い影の色
scrollbar-face-color 3次元スクロールバーの突出部分の色
scrollbar-highlight-color スクロールバーの空白部分の色
scrollbar-shadow-color 立体スクロールバーの影の色上記の 7 つのプロパティで設定される値はすべてカラー値であり、スタイルシートで定義されたさまざまな方法で表現できます。

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

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

1. ブラウザウィンドウにスクロールバーや水平スクロールバーを表示しないようにする
<body style="overflow-x:hidden">
垂直スクロールバーなし
<body style="overflow-y:hidden">
スクロールバーなし
<body style="overflow-x:hidden;overflow-y:hidden"> または <body style="overflow:hidden">

2. 複数行テキストボックスのスクロールバーを水平スクロールバーなしに設定する

コードをコピー

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

垂直スクロールバーなし

コードをコピー

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

スクロールバーなし

コードをコピー

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

または

コードをコピー

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

3. ウィンドウのスクロールバーの色を設定するウィンドウのスクロールバーの色を赤に設定します <body style="scrollbar-base-color:red">
scrollbar-base-color は基本色を設定します。通常、スクロールバーの色を変更するには、この 1 つのプロパティを設定するだけで済みます。
ちょっとした特殊効果を追加します:

コードをコピー

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

4. 他の要素を設定する場合も基本的には同じですが、再利用できるようにスタイルシートファイルにクラスを定義するのがベストです。

コードをコピー

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

.クールスクロールバー
{
スクロールバーの矢印の色:黄色;
スクロールバーのベースカラー:ライトサーモン;
}

上記の文をスタイルシートファイルまたはHTMLヘッダーの<style> </style>に追加し、
<textarea class="coolscrollbar"> </textarea>

<<: 入力ボックスのプレースホルダーアニメーションと入力検証を実現する純粋なCSS

>>: CentOS に Docker をインストールし、Springboot で Docker をリモート公開する方法